使用html2Canvas、JsPDF分页打印(分享)

该应用场景是，是使用luckysheet生成PDF，一共分了四种情况，传值的时候只需要判断，生成html的宽度(需要乘0.75，因为是pt单位做对比)只要大于a4的宽度就需要纵向打印

单张纵向a4
单张横向a4
分页纵向a4
分页横向a4
这四种都可以识别

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
/*** 导出页面为PDF格式，1pt === 4/3px，1px === 0.75pt* @param { String } title 文件名* @param { Number } type 0：生成PDF、1：生成base64* @param { Boolean } longitudinalShow true：横向打印，false：纵向打印* @returns { Promise }*/
export function getPdf(title, type, longitudinalShow = false) {return new Promise((res, rej) => {html2Canvas(document.querySelector('#printHtml'), {allowTaint: true, // 是否允许不同源的图片污染画布taintTest: false, // 是否在渲染前测试图片useCORS: true, // 是否尝试使用 CORS 从服务器加载图片dpi: window.devicePixelRatio * 1, // 将分辨率提高到特定的DPIscale: 1, // 用于渲染的比例，默认为浏览器设备像素比率}).then((canvas) => {// a4纸 pt尺寸let a4Size = {w: 595.28,h: 841.89,};// 算的是 px单位需要转 pt，a4纸与当前canvas的间距，用于居中let l = (((longitudinalShow ? a4Size.h : a4Size.w) * 1.33 - canvas.width) / 2) * 0.75;let pageData = canvas.toDataURL('image/jpeg', 1.0);let PDF = new JsPDF({// landscape：横向打印，默认纵向打印orientation: longitudinalShow ? 'landscape' : '',unit: 'pt',format: 'a4',});// 表高度，pt单位比较let sheetHeight = canvas.height * 0.75;let t = 0;// 是否需要转换宽高(a4纸打印做转向了，但是分页处理没有转向)let isRotate = longitudinalShow ? a4Size.w : a4Size.h;// 当表小于a4的高时，无需分页if (isRotate > sheetHeight) {/*addImage(img, JPEG, left, top, width, height) pt单位1. 宽高传0，默认为原始图片的px单位2. 如果传入图片原始宽高会识别为pt，打印出来后会进行1.333倍的放大3. 打个比方a4纸的宽pt单位为595.28，px单位为793.71，一个图片宽高为180px如果使用默认为0的，打印出来还是为180px，如果手动设置180，打印出来就会转换为240px意思就是如果图片原始为px单位，设置的pt单位打印就不需要传，如果图片原始为pt单位，设置的pt单位打印就需要传*/PDF.addImage(pageData, 'JPEG', l, 24, 0, 0);} else {while (sheetHeight > 0) {PDF.addImage(pageData, 'JPEG', l, t, 0, 0);sheetHeight -= isRotate;t -= isRotate;// 避免添加空白页if (sheetHeight > 0) {PDF.addPage();}}}if (!type) {PDF.save(title + '.pdf');} else {var basePDf = PDF.output('datauristring');res(basePDf);}});});
}

使用html2Canvas、JsPDF分页打印(分享)相关推荐

html2canvas+jsPDF实现横向打印iframe中的内容
需要用到的插件:html2canvas jsPDF.debug.js jquery html2canvas github地址:https://github.com/niklasvh/html2c ...
html转换pdf 分页,(html2canvas jspdf)html转pdf带分页
1.下载npm包 npm i html2canvas jspdf -s 2.页面引入 import html2canvas from 'html2canvas'; import jsPDF from ...
html2canvas+jspdf 完美解决html导出且分页解决图片显示不全问题
html2canvas+jspdf 完美解决html导出且分页解决图片显示不全问题参考文章: (1)html2canvas+jspdf 完美解决html导出且分页解决图片显示不全问题 (2)ht ...
html2pdf的使用与html2Canvas+jspdf长图不分页
html2pdf的使用 html2pdf在https://github.com/eKoopmans/html2pdf.js说明的很清楚了,下面给出一个例子 const handleDownload = ...
html2canvas + jspdf 实现 html导出pdf
html2canvas + jspdf 实现 html导出pdf 1.下载插件 npm install html2canvas jspdf --save 2.utils中创建htmlToPdf.js文 ...
npoi 设定视图为分页预览_按班级分页打印，只要两步就行，不需要再筛选复制打印了...
话说在猪爸爸幼儿园,和谐可亲的伊伊老师,最近遇上了一个小难题,每次要将各个班级的学生成绩打印出来,但是各个班级的成绩,都是放在一个工作表上,每次都需要筛选,然后把每一个班级的数据复制粘贴到其他工作表, ...
html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
Java实现表格打印翻页_简单又实用的小文章来了----表格分页打印的那些小事（2）...
前言之前写过一篇表格分页打印的实践,其基本思路是按照一比一还原打印宽高,然后根据页面高度内容以及内容长度进行粗略计算,针对不能显示的进行内容分割. 相比上次逻辑稍微繁琐一点,今天分享的方式是更加简单 ...
vue 打印（分页打印）
最近项目中碰到一个需求,需要前端预览打印当前页面的内容,但是在打印的时候需要分页打印,想了很多办法,最后解决,在这做一个分享. 首先是打印,网上有很多方法,这里面我用的是一个插件 vue-print- ...

使用html2Canvas、JsPDF分页打印(分享)

使用html2Canvas、JsPDF分页打印(分享)相关推荐

最新文章

热门文章