1、思路:先将页面html转换成图片,再将图片生成pdf后下载。
2、安装:
//页面html转换成图片 npm install --save html2canvas //图片生成pdf npm install jspdf --save
3、组件引入
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf'
4、方法
getHtmlCanvas(){ var title = this.title; html2Canvas(document.querySelector('#divPdf'), { allowTaint: true }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let divPdf = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { divPdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { divPdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { divPdf.addPage() } } } divPdf.save(title + '.pdf') } ) }
html2canvas生成图片后下载太慢解决方法(dom-to-image)
上面是“vuejs将网页中指定div转成pdf并下载”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2175.html
workflows工作流
三阶放大comfyui工作流
一个全脸彩绘和纹身的超级名模ComfyUI工作流
严寒的冬天里一只小鸟在森林的树枝上休息
stvmccrr风格的玫瑰花ComfyUI工作流
晚上樱花狐狸ComfyUI工作流
一个美丽的女孩穿着花瓣做的衣服
一只蚂蚁在花丛中找食物ComfyUI工作流
一位美丽的女士在座机上讲话ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!