工程项目信息查询平台_我的主页_厦门网站综合优化贵吗_精准客户信息一条多少钱

需求

把dom元素生成的页面生成pdf文件，实现下载和预览pdf文件。

解决方案

利用html2canvas和jsPDF实现把页面转为pdf文件。

具体实现步骤

1、给需要转换为pdf文件的dom增加id
例如：

<div id="pdf-box">
// 此处为你的页面内容
</div>

2、在utils公共工具函数文件中引入html2canvas和jsPDF

import dayjs from "dayjs";
import html2canvas from "html2canvas";

3、创建具体实现方法函数htmlToPDF

/** 将dom页面转为pdf预览 */
export const htmlToPDF = async (htmlId: string, title: string, bgColor = "#fff") => {const loading = ElLoading.service({lock: true,text: '导出pdf中...',background: "rgba(0, 0, 0, 0.7)",});let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElementconst A4Width = 595.28;const A4Height = 841.89;let canvas = await html2canvas(pdfDom, {scale: 2,useCORS: true,backgroundColor: bgColor,});let pageHeight = (canvas.width / A4Width) * A4Height;let leftHeight = canvas.height;let position = 0;let imgWidth = A4Width;let imgHeight = (A4Width / canvas.width) * canvas.height;/*根据自身业务需求  是否在此处键入下方水印代码*/let pageData = canvas.toDataURL("image/jpeg", 1.0);let PDF = new jsPDF("p", 'pt', 'a4');if (leftHeight < pageHeight) {PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= A4Height;if (leftHeight > 0) PDF.addPage();}}loading.close()// PDF.save(title + ".pdf"); // 如果需要下载pdf文件则使用这行代码let pdfUrl = window.URL.createObjectURL(new Blob([PDF.output('blob')], { type: "application/pdf" })) || ''return pdfUrl
}

4、调用htmlToPDF方法

const pdfUrl = htmlToPDF("pdf-box", 'xxx.pdf')
window.open(pdfUrl, "_blank");

备注

以上便是完整的利用html2canvas和jsPDF实现把页面转为pdf文件实现下载和预览的功能，不足的地方请多指教。