上杭县城乡规划建设局网站搜索网站的设计与建设
实现思路
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');
}