使用JS网页内容保存为PDF
2021-08-03 20:56
标签:actor 根据 canvas 初始化 ntb jquery 需求 document 任务 一、使用插件 1.html2canvas.js script引入: 2.jspdf.js script引入: 二、编写HTML文件 下载 项目员 任务分值 日志分值 绩效分值 绩效额度 三、编写js文件 文件名称:exportpdf.js // 获取本页表格中最后一行是第几行(对不同高度的表格进行不同的处理) var last_counts = $(‘#down-table:last‘).text(); //监听pdf导出按键 $(‘#download‘).click(function () { // 将 id 为 contents 的 div 渲染成 canvas html2canvas(document.getElementById("download-table"),{ // 渲染完成时调用,获得 canvas onrendered: function(canvas) { // 从 canvas 提取图片数据 var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 555.28; var imgHeight = 555.28/contentWidth * contentHeight; var imgData = canvas.toDataURL(‘image/jpeg‘,1.0); //初始化pdf,设置相应格式(单位为pt,导出a4纸的大小) var doc = new jsPDF("p", "pt", "a4"); doc.internal.scaleFactor = 1.33; if (leftHeight 0) { doc.addImage(imgData, ‘JPEG‘, 20, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { doc.addPage(); } } } //输出保存命名为bill的pdf doc.save(‘bill.pdf‘); }, // 导出的pdf默认背景颜色为黑色,所以要设置颜色为白(根据自己的需求设置) background: ‘#FFF‘ }) }); 使用JS网页内容保存为PDF标签:actor 根据 canvas 初始化 ntb jquery 需求 document 任务 原文地址:https://www.cnblogs.com/nlbz/p/14900403.html
上一篇:JavaScript循环语句
下一篇:CSS样式表的三种引入方式