方案1:html2canvas + jspdf (缺点:清晰度不高) 安装插件: 亲测可用 yarn add html2canvas yarn add jspdf importhtml2canvasfrom'html2canvas';importjspdffrom'jspdf';/** * *@paramelementId dom节点id *@parampdfName 导出的pdf文件名 *@paramcallback 回调函数 */exportconsthtmlToPdfDownload= (elem...
Vue.use(htmlToPdf) 新建: import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { /** * * @param {*} reportName 下载时候的标题 * @param {*} isDownload 是否下载默认为下载,传false不下载 */ Vue.prototype.getPdf = function (reportName...
生成pdf需要把转化的元素添加到jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。 html2canvas + jsPDF 单页 将demo1的例子修改下: <script type="t...
我得项目是 ant-design 用react得 所以先: npm i html2canvas npm i jspdf 安装好依赖后上代码 importhtml2Canvasfrom'html2canvas'importjspdffrom'jsPDF'html2Canvas(dom).then(function(canvas){varcontentWidth=canvas.width;varcontentHeight=canvas.height;varpageHeight=contentWidth/592.28*841.89;varleftHei...
1、安装 html2canvas 和 jspdf ：npm install html2canvas jspdf 2、新建⼀个⽂件，单独处理⽣成 pdf import html2canvas from 'html2canvas'import jsPdf from 'jspdf'async function htmlToPdf() { const elId: string = 'body' // body: 想要⽣成 pdf 的页⾯的id if (!elId) { // ...
Promise本身是同步的立即执行函数(如果一个任务已经完成,再添加回调函数,该回调函数会立即执行), 当在promise中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行,打印p的时候,是打印的返回结果,一个Promise实例。
图片生成PDF 使用方法如下: // 三个参数,第一个方向,第二个单位,第三个尺寸格式 var doc = new jsPDF('landscape','pt',[205, 115]) // 将图片转化为dataUrl var imageData = ‘data:image/png;base64,iVBORw0KGgo...’; doc.addImage(imageData, 'PNG', 0, 0, 205, 115); ...
1、下载jspdf 里面有个fontconverter目录 2、双击打开fontconverter.html文件 选择你本地的ttf文件,点击“Create”按钮,会生成一个js文件。 3、将js文件放入自己的项目中 在页面中引入js文件 import '@/utils/simhei-normal.js' 4、设置字体 PDF.setFont('simhei')PDF.text('JSPDF是一个用于生成PDF文件的客户...
html页面转pdf下载 两个js文件可供使用,地址如下: https://github.com/linwalker/render-html-to-pdf 唯一的缺点是图片跨页不好解决,最终的pdf文件如下: 解决下载pdf文件背景是黑色的问题,将div添加背景色为白色,未解决图片跨页问题,解决思路: ...
使用之前:将html转pdf打印下载功能,使用html2canvas+jsPDF npm install html2canvas--save npm install jspdf--save 1. 2. 1、第一种:没有页面样式,排版较为紧凑(样式较乱) printPage(dom,title){this.loading=trueconsttargetDom=document.querySelector('#dynamic-table-page')constcopyDom=targetDom.cloneNod...