前端将网页转换为pdf并支持下载与上传

1.pdf下载

handleExport() {const fixedH = document.getElementById("fixed-h");const pageOne = document.getElementById("mix-print-box-one");const pageTwo = document.getElementById("mix-print-box-two");fixedH.style.height = '30vh';pageOne.style.display = 'block';pageTwo.style.display = 'block';// 禁止滚动document.body.addEventListener('touchmove', this.preventDefaultScroll, { passive: false });document.body.addEventListener('wheel', this.preventDefaultScroll, { passive: false });html2canvas(pageOne).then((canvasOne) => {const imgOne = canvasOne.toDataURL("image/png");const pdf = new jsPDF();const propsOne = pdf.getImageProperties(imgOne);const widthOne = pdf.internal.pageSize.getWidth();const heightOne = (propsOne.height * widthOne) / propsOne.width;pdf.addImage(imgOne, "PNG", 0, 0, widthOne, heightOne);html2canvas(pageTwo).then(canvasTwo => {const imgTwo = canvasTwo.toDataURL("image/png");const propsTwo = pdf.getImageProperties(imgTwo);const widthTwo = pdf.internal.pageSize.getWidth();const heightTwo = (propsTwo.height * widthTwo) / propsTwo.width;pdf.addPage(); // 分页pdf.addImage(imgTwo, "PNG", 0, 0, widthTwo, heightTwo);const title = `${this.formOne.application}测试的.pdf`;pdf.save(title);fixedH.style.height = 'auto';pageOne.style.display = 'none';pageTwo.style.display = 'none';// 恢复滚动document.body.removeEventListener('touchmove', this.preventDefaultScroll);document.body.removeEventListener('wheel', this.preventDefaultScroll);});});
}

2.pdf上传

handleUploadPdf(id) {const element = document.getElementById("myElementId");html2canvas(element).then((canvas) => {const imgData = canvas.toDataURL("image/png");const pdf = new jsPDF();const imgProps = pdf.getImageProperties(imgData);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);// 将 PDF 转换为 Blob 对象const blob = pdf.output("blob");// 上传文件const fileName = "测试的.pdf";const formData = new FormData();formData.append("file", blob, fileName);uploadPdf(formData).then((res) => {// 将pdf地址传给后端uploadPdfUrl({id,fileName,path: res.fileName,});console.log("上传成功", res.url);});});
}