html转PDF
项目场景：
提示：这里简述项目相关背景：
在项目中会有一些需要页面转成PDF的情况，这里需要配合一些插件可以完成
使用html2canvas将使用canvas将页面转为base64图片流，并插入jspdf插件中，保存并下载pdf。
安装依赖
提示：这里描述项目中遇到的问题：
npm i html2canvas
npm i jspdf解决方案1：
提示：这里填写该问题的具体解决方案：
1：创建htmlToPdf.ts文件
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';const htmlToPdf = {getPdf(title) {html2Canvas(document.querySelector('#pdfStyle'), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 2, //按比例增加分辨率}).then((canvas) => {const pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向const ctx = canvas.getContext('2d')const a4w = 190const a4h = 272 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277//按A4显示比例换算一页图像的像素高度const imgHeight = Math.floor((a4h * canvas.width) / a4w) let renderedHeight = 0;while (renderedHeight < canvas.height) {const page = document.createElement('canvas');page.width = canvas.width;//可能内容不足一页page.height = Math.min(imgHeight, canvas.height - renderedHeight); //用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight),),0,0,);pdf.addImage(page.toDataURL('image/jpeg', 1.0),'JPEG',10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width),); //添加图像到页面，保留10mm边距renderedHeight += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容，添加一个空页}// delete page;}//保存文件pdf.save(title + '.pdf');// loading = false;// console.log(loading);});},
};export default htmlToPdf;
2：在页面中使用
...
<!-- 按钮 -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">转成pdf
</el-button>
...
<div id="pdfDom"><!-- 此处是希望转成pdf的部分的内容，用一个大div盒子包起来 -->
</div>
<script setup>
// 导入htmlToPdf.js
import htmlToPdf from '@/utils/htmlToPdf';
const pdfFunc = () => {loading.value = true;// 调用htmlToPdf工具函数htmlToPdf.getPdf('文档名称');// 定时器模拟按钮loading动画的时间setTimeout(() => {loading.value = false;ElMessage.success('打印成功!');}, 1000);
}
</script>
解决方案2：
1：创建htmlToPdf.ts文件
// utils/htmlToPdf.js：导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export default {install(Vue, options) {// id-导出pdf的div容器；title-导出文件标题Vue.prototype.htmlToPdf = (id, title) => {const element = document.getElementById(`${id}`)const opts = {scale: 4, // 缩放比例，提高生成图片清晰度useCORS: true, // 允许加载跨域的图片allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用tainttest: true, // 检测每张图片已经加载完成logging: true // 日志开关，发布的时候记得改成 false}html2Canvas(element, opts).then((canvas) => {console.log(canvas)const contentWidth = canvas.widthconst contentHeight = canvas.height// 一页pdf显示html页面生成的canvas高度;const pageHeight = (contentWidth / 592.28) * 841.89// 未生成pdf的html页面高度let leftHeight = contentHeight// 页面偏移let position = 0// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高const imgWidth = 595.28const imgHeight = (592.28 / contentWidth) * contentHeightconst pageData = canvas.toDataURL('image/jpeg', 1.0)console.log(pageData)// a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面const PDF = new JsPDF('', 'pt', 'a4')// 当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {// addImage(pageData, 'JPEG', 左，上，宽度，高度)设置PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {// 超过一页时，分页打印（每页高度841.89）while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')}).catch((error) => {console.log('打印失败', error)})}}
}2：在页面中使用
<template><div><divid="pdfDom">测试数据</div><el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button></div></template><script>import JsPDF from 'jspdf'import html2Canvas from 'html2canvas'mounted() {// 导出pdfbtnClick() {this.$nextTick(() => {this.htmlToPdf('pdfDom', '个人报告')})},},</script>