当前位置： 首页 > news >正文

vue3.0将后端返回的word文件流转换为pdf并导出+html2pdf.js将页面导出为pdf

news 来源：原创 2025/9/15 20:49:22

实现思路

1.将Word文档转换为HTML：mammoth.js，它可以将.docx文件转换为HTML
2.将HTML转换为PDF：使用html2pdf.js将HTML转换为PDF

如果想要相同的效果，也可以把前端页面直接导出转换为pdf: 运用的插件：html2pdf.js

后端文件流导出接口返回：
在这里插入图片描述
首先我们要安装mammoth.js和html2pdf.js

npm install mammoth jspdf

代码：

// 引入
import mammoth from "mammoth";
import html2pdf from "html2pdf.js";

 <el-button type="primary" :loading="isLoading" @click="healthExport">导出</el-button>

async function healthExport() {try {await signatureApi.onReportWord({id: selectedData.value[0].id,signId: selectedData.value[0].healthyId,}).then((res) => {if (res) {const reader = new FileReader();reader.onload = (e) => {const arrayBuffer = res;mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((result) => {const htmlContent = result.value; // 这是转换后的HTML内容// 将HTML添加到页面的一个隐藏div中var div = document.createElement("div");// 可以给pdf自定义添加样式（将word提取html再转换成pdf导出这时候pdf是没有样式的）const css = `<style>body { p { text-align:center;font-size:20px;soild  }</style>`;div.innerHTML = `<html>${css}${htmlContent}</html>`;document.body.appendChild(div);// 使用html2pdf.js将HTML转换为PDFhtml2pdf().from(div).set({html2canvas: { scale: 2 },jsPDF: { format: "a4", orientation: "portrait" },css: css,}).save("document.pdf");// 清理 - 移除添加的divdocument.body.removeChild(div);}).catch((err) => {console.error(err);});};reader.readAsArrayBuffer(res);}});} catch (error) {console.error("err", error);}
}

第二种前端思路：把前端页面直接导出转换为pdf
页面：点击导出直接导出为pdf
在这里插入图片描述

 <el-button type="primary" :loading="isLoading" @click="handleExport">导 出</el-button>function handleExport() {html2pdf().set({html2canvas: { scale: 3 }, // 增加缩放比例以提高清晰度jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } // 设置单位和纸张大小
}).from(document.getElementById('pdfRef')).save('健康体检通知书.pdf');
}

相关文章：

vue3.0将后端返回的word文件流转换为pdf并导出+html2pdf.js将页面导出为pdf

实现思路 1.将Word文档转换为HTML&#xff1a;mammoth.js&#xff0c;它可以将.docx文件转换为HTML 2.将HTML转换为PDF&#xff1a;使用html2pdf.js将HTML转换为PDF 如果想要相同的效果&#xff0c;也可以把前端页面直接导出转换为pdf: 运用的插件&#xff1a;html2pdf.js 后端…...

编程日记 2025/9/15 20:49:22

【心得】缓存穿透与缓存击穿总是记混，一文从英语单词含义角度分析带你区分清楚！

一句话省流版&#xff1a;缓存穿透的英语为cache penetration,可以翻译为缓存渗透&#xff0c;“渗透”联想到网安的攻击渗透&#xff0c;故缓存穿透是绕过防护进行攻击&#xff1b; 缓存击穿的英语为"cache breakdown"&#xff0c;可以翻译为缓存故障&#xff0c;“…...

编程日记 2025/9/14 21:34:50

day02

作业2 为 Activity 设置2种不同的启动模式并通过 adb 命令进行查看任务栈信息&#xff0c;并且打印生命周期方法执行日志 step1&#xff1a;生成第二个Activity和相应配置、 一个是singleTask模式&#xff0c;还一个是mainActivity的默认格式 step2&#xff1a;打印生命周期…...

编程日记 2025/9/15 20:00:15

JavaScript 简单类型与复杂类型-堆和栈

深入理解JavaScript中的简单类型&#xff08;基本数据类型&#xff09;与复杂类型&#xff08;引用数据类型&#xff09;如何在内存中存储对于编写高效、无误的代码至关重要。本文将探讨这两种类型的差异&#xff0c;以及它们在内存中的存储机制——栈&#xff08;Stack&#x…...

编程日记 2025/9/11 5:58:07

五、AIGC大模型_04LLaMA-Factory基础知识与SFT实战

1、LLaMA-Factory 基本介绍 1.1 定义 LLaMA-Factory 是一个开源的大型语言模型&#xff08;LLM&#xff09;微调框架&#xff0c;旨在帮助开发者和研究人员轻松地对预训练语言模型进行定制化训练和优化 1.2 功能特点 支持多种预训练模型 LLaMA Factory 支持超过 100 种主流的…...

编程日记 2025/9/15 6:41:54

数字IC后端设计实现OCC(On-chip Clock Controller)电路介绍及时钟树综合案例

数字IC后端时钟树综合专题&#xff08;OCC电路案例分享&#xff09; 复杂时钟设计时钟树综合(clock tree synthesis)常见20个典型案例 1、什么是OCC&#xff1f; 片上时钟控制器(On-chip Clock Controllers &#xff0c;OCC)&#xff0c;也称为扫描时钟控制器(Scan Clock Con…...

编程日记 2025/9/14 15:09:26

LeetCodehot 力扣热题100 全排列

这段代码的目的是计算给定整数数组的所有全排列&#xff08;permutations&#xff09;&#xff0c;并返回一个包含所有排列的二维数组。 思路解析 在这段代码中&#xff0c;采用了 深度优先搜索&#xff08;DFS&#xff09; 和 回溯 的方法来生成所有的排列。 关键步骤&#xf…...

编程日记 2025/9/9 21:38:39

深度学习c++资源库：vector容器，蓝桥杯常用算法sort，unique（排序+去重）

vector容器 1.基本概念 <vector> 是 STL 中的一个容器类&#xff0c;不同于普通数组的静态空间&#xff0c;vector可以动态扩展。 动态扩展&#xff1a;并不是在原空间连接新空间&#xff0c;而是找到更大的内存空间&#xff0c;将原数据拷贝到新空间&#xff0c;释放…...

编程日记 2025/9/15 15:00:05

Postgresql-重置统计信息(reset statistics)

文章目录 理解 PostgreSQL 中的 pg_stat_resetpg_stat_reset 的作用与使用时机pg_stat_reset 所需权限PostgreSQL 重置统计信息的方法重置整个database重置特定表的统计重置特定function的统计重置Statistics Collector:重置 WAL&#xff08;Write-Ahead Logging&#xff09;统…...

编程日记 2025/9/11 13:05:27

【Uniapp-Vue3】导入uni-id用户体系

在uniapp官网的uniCloud中下载uni-id用户体系 或者直接进入加载&#xff0c;下载地址&#xff1a;uni-id-pages - DCloud 插件市场 进入以后下载插件&#xff0c;打开HbuilderX 选中项目&#xff0c;点击确定 点击跳过 点击合并 右键uniCloud文件夹下的database文件夹&#x…...

编程日记 2025/9/14 14:19:12

【前沿探索篇七】【DeepSeek自动驾驶：端到端决策网络】

第一章 自动驾驶的"感官革命"：多模态神经交响乐团 1.1 传感器矩阵的量子纠缠 我们把8路摄像头+4D毫米波雷达+128线激光雷达的融合称为"传感器交响乐"，其数据融合公式可以简化为： def sensor_fusion(cam, radar, lidar):# 像素级特征提取 (ResNet-152…...

编程日记 2025/8/16 12:57:59

Staruml软件的介绍安装uml类图的绘制流程

文章目录 1.uml和staruml之间的关系2.软件的安装3.配置脚本语言4.Staruml创建类图4.反向工程 1.uml和staruml之间的关系 这篇文章主要是介绍这个staruml软件的安装和相关的背景介绍&#xff1a; 我和uml初识于IDEA软件&#xff0c;学习java的你一定用过这个软件&#xff0c;当…...

编程日记 2025/9/9 0:51:38

神经网络发展简史：从感知机到通用智能的进化之路

引言 神经网络作为人工智能的核心技术&#xff0c;其发展历程堪称一场人类对生物大脑的致敬与超越。本文将用"模型进化"的视角&#xff0c;梳理神经网络发展的五大关键阶段&#xff0c;结合具象化比喻和经典案例&#xff0c;为读者呈现一幅清晰的AI算法发展图谱。 一…...

编程日记 2025/9/11 12:11:33

快节奏生活

在当今快节奏的商务环境中&#xff0c;效率成为了决定企业竞争力的关键因素之一。亿可达软件连接平台&#xff0c;以其独特的功能和优势&#xff0c;为职场人士带来了前所未有的便捷与高效&#xff0c;成为了众多用户心中的“宝藏”工具。 1、亿可达&#xff1a;自动化流程的搭…...

编程日记 2025/9/14 8:24:00

Windows 11【1001问】通过Rufus制作Win 11系统安装U盘

随着科技的发展&#xff0c;Windows 11 已经成为许多用户的首选操作系统。在之前的几篇文章中&#xff0c;我们详细探讨了 Windows 11 的概念、安装配置要求以及如何下载 Windows 11 镜像文件&#xff0c;并介绍了六种不同的安装方法。本篇博客将聚焦于使用 ISO 文件安装 Windo…...

编程日记 2025/9/14 6:52:45

spring中手写注解开发(创建对象篇)

说明&#xff1a; 在spring底层中并不是我写的如此&#xff0c;这篇只是我用我自己的方式实现了使用注解组件扫描并且 创建对象&#xff0c;方法并不是很难&#xff0c;可以看一看&#xff0c;欢迎大佬评论 第一步&#xff1a; 我们需要自己写一个注解&#xff0c;我用的是idea…...

编程日记 2025/9/15 3:08:20

DeepSeek进入开源周，分享几点关于开源的思考

最近DeepSeek进入开源周&#xff0c;又把差点被大众遗忘在角落的开源话题拉了出来。 作为一个开源作者&#xff0c;也分享几点关于开源的思考。 AI对开源的影响 开源项目遇到的最大困难 开源项目不应该商业化 你的开源项目是垃圾...

编程日记 2025/8/21 8:03:20

大模型训练中的数据不平衡问题及其解决策略

目录 大模型训练中的数据不平衡问题及其解决策略 一、数据不平衡问题的影响 二、处理数据不平衡问题的方法 1. 过采样&#xff08;Oversampling&#xff09; 2. 欠采样&#xff08;Undersampling&#xff09; 3. 代价敏感学习&#xff08;Cost-Sensitive Learning&#xf…...

编程日记 2025/9/15 11:09:28

本地部署DeepSeek R1满血版大模型

一、前言 老周上一篇分享了《本地部署DeepSeek R1大模型》&#xff0c;本地受硬件条件限制&#xff0c;只跑了80亿参数量的模型。 1.5b模型基本可以在大部分个人电脑甚至手机中运行&#xff0c;如果你有 6G 显存以上&#xff0c;那么可以部署7b模型&#xff0c;如果有16G显存&…...

编程日记 2025/9/12 20:28:28

外发抄板SCH与PCB检查系列

外发抄板SCH与PCB检查系列 一、检查到手的文件二、PCB与原理图的对应检查1.为什么要查SCH与Pcbdoc的对应&#xff1f;2.查询方法 三、PCB与实物的信号对应检查 一、检查到手的文件 外发出去两块板子&#xff1a;控制板与功率板。 抄板机构返回的文件&#xff1a; 1.互相独立的…...

编程日记 2025/9/14 20:09:51

EX_25/2/25

编写一个如下场景&#xff1a; 有一个英雄Hero类&#xff0c;私有成员&#xff0c;攻击&#xff0c;防御&#xff0c;速度&#xff0c;生命值&#xff0c;以及所有的set get 方法 编写一个 武器 Weapon 类&#xff0c;拥有私有成员攻击力&#xff0c;以及set get 方法 编写一个…...

编程日记 2025/9/13 10:27:27

C# 打印Word文档 – 4种打印方法

Word文档是日常办公和学习中不可或缺的一部分。比如在商务往来中&#xff0c;经常需要打印 Word 文档用于撰写和传递正式的商务信函、合作协议、项目提案等。打印出来的文档便于双方签字盖章&#xff0c;具有法律效力和正式性。本文将提供以下4种通过C# 打印Word文档的方法&…...

编程日记 2025/9/12 8:24:39

ROS的action通信——实现阶乘运算（一）

在ROS中除了常见的话题(topic&#xff09;通信、服务(server)通信等方式&#xff0c;还有action通信这一方式&#xff0c;由于可以实时反馈任务完成情况&#xff0c;该通信方式被广泛运用于机器人导航等任务中。本文将通过三个小节的分享&#xff0c;实现基于action通信的阶乘运…...

编程日记 2025/9/15 5:00:05

Mac 上安装多版本的 JDK 且实现 自由切换

1.可以通过查看以下目录中的内容&#xff0c;确认当前已经安装的 jdk 版本。 cd /Library/Java/JavaVirtualMachines2.命令行查看 jdk 的安装路径 /usr/libexec/java_home -V3.下载要安装的jdk版本&#xff0c;修改环境变量( cat ~/.bash_profile) # 定义JDK 8和JDK 17的安装路…...

编程日记 2025/9/14 0:50:10

网络编程套接字

目录 一、认识端口号 二、端口号和进程ID 三、TCP/UDP协议 四、网络字节序 五、socket编程接口 5.1socket的常见API 5.2socketaddr结构 六、简单的UDP程序 七、地址转换函数 八、简单的TCP网络程序 九、Tcp协议通讯流程 9.1基于TCP协议的客户端/服务器程序的一般流…...

编程日记 2025/9/15 9:50:01

45.matlab产生正弦叠加信号

&#xff0c;...

编程日记 2025/9/13 13:44:48

Java23种设计模式案例

目录 一、概述 二、创建型模式 (Creational Patterns) 单例模式 (Singleton Pattern) 工厂方法模式 (Factory Method Pattern) 抽象工厂模式 (Abstract Factory Pattern) 建造者模式 (Builder Pattern) 原型模式 (Prototype Pattern) 三、结构型模式 (Structu…...

编程日记 2025/9/15 20:42:48

计算机毕业设计程序，定制开发服务

我们擅长的开发语言包括Python、C、Golang、Java&#xff0c;以及前端技术如HTML、CSS、JS和Vue。我们的服务内容丰富&#xff0c;能够满足您各种需求&#xff0c;无论是简单的功能开发还是复杂的定制项目&#xff0c;我们都能为您提供专业支持。若有具体需求可联系作者。 链接…...

编程日记 2025/9/12 16:12:02

AI提示词的种类与适合的任务

以下是提示词的主要种类及其适用任务&#xff0c;基于大模型特性与最佳实践总结&#xff1a; 一、基础提示词 零样本提示&#xff08;Zero-shot Prompting&#xff09; 形式&#xff1a;直接输入任务指令&#xff0c;不提供示例&#xff08;如“翻译以下句子&#xff1a;Hello …...

编程日记 2025/9/15 4:07:16

【Kimi】自动生成PPT-并支持下载和在线编辑--全部免费

【Kimi】免费生成PPT并免费下载 用了好几个大模型&#xff0c;有些能生成PPT内容&#xff1b; 有些能生成PPT&#xff0c;但下载需要付费&#xff1b; 目前只有Kimi生成的PPT&#xff0c;能选择模板、能在线编辑、能下载&#xff0c;关键全部免费&#xff01; 一、用kimi生成PP…...

编程日记 2025/9/15 4:13:28

Maven环境搭建

Maven 1. 概述 ApacheMaven是一个软件项目管理和构建工具。基于项目对象模型&#xff08;POM&#xff09;的概念&#xff0c;Maven可以从中心信息中管理项目的构建、报告和文档 理解: maven构建项目&#xff08;100%&#xff09;而且帮你完成jar的统一管理。 思考: 原来的jar—…...

编程日记 2025/9/10 16:34:13

Vue面试题

Vue面试题 Vue2.0的生命周期&#xff0c;每个生命周期分别做了哪些事情 create阶段&#xff1a;vue实例被创建。 beforeCreate: 创建前&#xff0c;此时data和methods中的数据都还没有初始化&#xff1b; created&#xff1a;创建完毕&#xff0c;data中有值&#xff0c;未…...

编程日记 2025/9/14 7:36:03

Linux时间日期类指令

1、data指令 基本语法&#xff1a; date &#xff1a; 显示当前时间date %Y : 显示当前年份date %m &#xff1a; 显示当前月份date %d &#xff1a; 显示当前哪一天date “%Y-%m-%d %H:%M:%S" &#xff1a; 显示年月日时分秒date -s 字符串时间 &#xff1a; 设置系统时…...

编程日记 2025/9/12 19:22:47

国标28181协议在智联视频超融合平台中的接入方法

一. 国标28181介绍 国标 28181 协议全称是《安全防范视频监控联网系统信息传输、交换、控制技术要求》&#xff0c;是国内视频行业最重要的国家标准&#xff0c;目前有三个版本&#xff1a; 2011 年&#xff1a;推出 GB/T 28181-2011 版本&#xff0c;为安防行业的前端设备、平…...

编程日记 2025/9/10 20:22:27

pyautogui库的screenshot()函数

# 方法一 screenshot pyautogui.screenshot() screenshot.save("screenshot.png")# 方法二 # 获取屏幕分辨率 screen_width, screen_height pyautogui.size()# 截取桌面屏幕 screenshot pyautogui.screenshot(region(0, 0, screen_width, screen_height)) screens…...

编程日记 2025/9/14 9:12:35

python与C系列语言的差异总结（3）

与其他大部分编程语言不一样&#xff0c;Python使用空白符&#xff08;whitespace&#xff09;和缩进来标识代码块。也就是说&#xff0c;循环体、else条件从句之类的构成&#xff0c;都是由空白符加上冒号(:)来确定的。大部分编程语言都是使用某种大括号来标识代码块的。下面的…...

编程日记 2025/9/15 6:07:18

《Linux系统编程篇》System V信号量实现生产者与消费者问题（Linux 进程间通信（IPC））——基础篇(拓展思维)

文章目录 &#x1f4da; **生产者-消费者问题**&#x1f511; **问题分析**&#x1f6e0;️ **详细实现&#xff1a;生产者-消费者****步骤 1&#xff1a;定义信号量和缓冲区****步骤 2&#xff1a;创建信号量****步骤 3&#xff1a;生产者进程****步骤 4&#xff1a;消费者进程…...

编程日记 2025/9/10 3:12:34

Jmeter接口并发测试

Apache JMeter 是一款开源的性能测试工具&#xff0c;广泛用于接口并发测试、负载测试和压力测试。以下是使用 JMeter 进行接口并发测试的详细步骤&#xff1a; 一、准备工作 安装 JMeter 下载地址&#xff1a;Apache JMeter 官网 确保已安装 Java 环境&#xff08;JMeter 依…...

编程日记 2025/9/14 20:09:59

Python--内置函数与推导式（上）

1. 匿名函数 Lambda表达式基础 语法&#xff1a;lambda 参数: 表达式​ 特点&#xff1a; 没有函数名&#xff0c;适合简单逻辑函数体只能是单行表达式自动返回表达式结果 # 示例1&#xff1a;加法 add lambda a, b: a b print(add(3, 5)) # 输出 8# 示例2&#xff1a;字…...

编程日记 2025/9/15 13:18:23

Python爬虫实战：获取六图网漫画图

注意：以下内容仅供技术研究，请遵守目标网站的robots.txt规定，控制请求频率避免对目标服务器造成过大压力！ 一、引言 Python 作为一种广泛应用于数据处理和网络爬虫领域的编程语言，拥有丰富的库和框架。其中，Scrapy 框架以其高效、灵活、可扩展等特点，成为构建爬虫程序的…...

编程日记 2025/9/12 19:13:57

《人工智能之高维数据降维算法：PCA与LDA深度剖析》

在人工智能与机器学习蓬勃发展的当下&#xff0c;数据处理成为关键环节。高维数据在带来丰富信息的同时&#xff0c;也引入了计算复杂度高、过拟合风险增大以及数据稀疏性等难题。降维算法应运而生&#xff0c;它能将高维数据映射到低维空间&#xff0c;在减少维度的同时最大程…...

编程日记 2025/9/14 6:45:28

第2课 树莓派镜像的烧录

树莓派的系统通常是安装在SD卡上的‌。SD卡作为启动设备&#xff0c;负责启动树莓派并加载操作系统。这种设计使得树莓派具有便携性和灵活性&#xff0c;用户可以通过更换SD卡来更换操作系统或恢复出厂设置。 烧录树莓派的镜像即是将树莓派镜像烧录到SD卡上&#xff0c…...

编程日记 2025/9/15 4:18:28

网络安全复习资料

网络安全复习资料 1.计算机网络安全是指保持网络中的硬件、软件系统正常运行&#xff0c;使他们不因自然和人为的因素而受到破坏、更改和泄露。 2.网络安全&#xff1a;物理安全&#xff0c;软件安全&#xff0c;信息安全&#xff0c;运行安全。 3.安全防范措施&#xff1a…...

编程日记 2025/9/14 21:55:26

PIG框架学习5——动态路由实现

一、前言 参考PIGX官方文档&#xff1a;https://www.yuque.com/pig4cloud/pig/ggnc3e 1.1 说明 在微服务中&#xff0c;定义路由一般是在网关gateway对应的配置文件中进行定义声明的&#xff0c;PIGX框架下&#xff0c;如何通过动态路由实现网关路由的实时更新&#xff1f; 实…...

编程日记 2025/9/14 1:47:30

vscode设置自动换行

vscode设置自动换行 方法 方法 点击文件->首选项->设置。搜索word wrap -> 选择 on 。 搜索Word Wrap&#xff0c;并把选项改为on。...

编程日记 2025/9/13 17:18:26

Flutter-升级Xcode后构建iOS报错

代码什么都没改动&#xff0c;貌似只是升级了下Xcode&#xff0c;构建iOS就一直报错&#xff0c;错误有时候还不一样。 Swift Compiler Error (Xcode): Unable to rename temporary /Users/admin/Library/Developer/Xcode/DerivedData/ModuleCache.noindex/2ZBFEEPIDQ0EY/Core…...

编程日记 2025/9/13 7:12:35

架构思维：架构的演进之路

文章目录 引言为什么架构思维如此重要架构师的特点软件架构的知识体系如何提升架构思维大型互联网系统架构的演进之路一、大型互联网系统的特点二、系统处理能力提升的两种途径三、大型互联网系统架构演化过程四、总结 引言 在软件开发行业中&#xff0c;有很多技术人可能会问…...

编程日记 2025/9/7 1:40:33

ElasticSearch公共方法封装

业务场景 1、RestClientBuilder初始化&#xff08;同时支持单机与集群&#xff09; 2、发送ES查询请求公共方法封装&#xff08;支持sql、kql、代理访问、集群访问、鉴权支持&#xff09; 3、判断ES索引是否存在&#xff08;/_cat/indices/${indexName}&#xff09; 4、判断ES…...

编程日记 2025/9/11 18:05:59

[Web 信息收集] Web 信息收集 — 手动收集 IP 信息

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01&#xff1a;通过 DNS 服务获取域名对应 IP DNS 即域名系统&#xff0c;用于将域名与 IP 地址相互映射&#xff0c;方便用户访问互联网。对于域名到 IP 的转换过程则可以参考下面这篇…...

编程日记 2025/9/15 20:14:48

多源最短路径求解: Floyd-Warshall算法和Johnson 算法

多源最短路径问题是图论中的一个经典问题, 它要求找到图中所有顶点对之间的最短路径. 这个问题可以通过几种不同的算法来解决, 其中最为著名的包括 Floyd-Warshall Algorithm 和 Johnson’s Algorithm. Floyd-Warshall 算法 弗洛伊德-沃沙尔算法(Floyd-Warshall Algorithm) 是…...

编程日记 2025/9/11 20:49:19