做网站如何使用网页插件,wordpress redis评论,亚马逊网站建设资料,专业网站设计公司价格一、问题 遇到一个需求#xff0c;就是要把整个看板页面导出成PDF用在汇报#xff0c;也就是要把整个DOM生成一个PDF保存到本地。
二、解决方法 1、解决思路#xff1a;使用插件 jspdf 和 html2canvas#xff0c;我用的版本如下图 2、代码实现
import { jsPDF } from …一、问题 遇到一个需求就是要把整个看板页面导出成PDF用在汇报也就是要把整个DOM生成一个PDF保存到本地。
二、解决方法 1、解决思路使用插件 jspdf 和 html2canvas我用的版本如下图 2、代码实现
import { jsPDF } from jspdf
import html2canvas from html2canvas// 封装成一个公共的方法核心代码
export const htmlToPDF async (htmlId: string, title: string, bgColor #fff) {const pdfDom document.getElementById(htmlId) as HTMLElement | null;if (!pdfDom) {console.error(Element not found);return ;}const scale window.devicePixelRatio || 1; // 使用设备像素比来提高清晰度const canvas await html2canvas(pdfDom, {scale: scale,useCORS: true,backgroundColor: bgColor,});const imgProps canvas.toDataURL(image/png); // 使用PNG格式提高质量const pdf new jsPDF({orientation: portrait,unit: px,format: [595.28, 841.89], // A4尺寸以像素为单位});const imgPropsObj pdf.getImageProperties(imgProps);const pdfWidth 576; // A4宽度减去一些边距// 控制页面展示 调整这个98 防止出现空白页const pdfHeight (imgPropsObj.height * pdfWidth) / imgPropsObj.width - 98;const pageHeight 841.89; // A4页面的高度let heightLeft pdfHeight; // 剩余高度let y 0; // 当前Y坐标// 处理分页逻辑while (heightLeft 0) {const imgHeight Math.min(heightLeft, pageHeight); // 当前图像可显示的高度pdf.addImage(imgProps, PNG, 0, y, pdfWidth, imgHeight); // 添加图像heightLeft - imgHeight; // 减去已添加的高度y imgHeight; // 移动Y坐标if (heightLeft 0) {pdf.addPage(); // 如果还有内容则添加新页面}}// 生成并返回PDF文件pdf.save(title .pdf);const pdfUrl window.URL.createObjectURL(new Blob([pdf.output(blob), { type: application/pdf }]));return pdfUrl;
};// 页面中调用 box要转成pdf文件的盒子
div idbox
// 此处为你的页面内容
/div
// 点击如下方法保存pdf
button clickfn生产pdf/button// htmlToPDF 第一个参数要生成pdf文件的盒子id 第二个参数生成pdf的文件名
const fn () {const pdfUrl htmlToPDF(box, xxx.pdf)
}
