vue3 html5生成pdf且下载

浪漫九州

已于 2024-03-22 00:43:24 修改

阅读量93

点赞数

分类专栏： vue 文章标签： html5 前端

于 2023-09-18 16:59:26 首次发布

本文链接：https://blog.csdn.net/m0_59631482/article/details/132985854

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

安装插件

npm i jspdf

npm i html2canvas

PDF.js封装

import html2canvas from "html2canvas";
import jsPDF from "jspdf";
const hmtlToPdf={
   getPdf(title){
      html2canvas(document.querySelector('#pdfDom'),{
         allowTaint:true,
         //跨域 img一定crossorigin="anonymous"
         useCORS: true
      }).then(canvas=>{
         //内容的宽度
         let contenWidth=canvas.width;
         //内容的高度
         let contenHeight=canvas.height;
         //一页pdf显示html页面生成的canvas高度，a4纸的尺寸[592.28,841.89]
         let pageHeight=(contenWidth/592.28)*841.89
         //未生成的html页面高度
         let leftHeight=contenHeight;
         //页面偏移
         let position=0;
         //a4纸的尺寸[592.28,841.89],html页面生成的canvas在pdf中图片的宽高
         let imgWidth=595.28
         let imgHeigth=(592.28/contenWidth)*contenHeight
         //canvas转图片数据
         let pageData=canvas.toDataURL('image/jpeg',1.0)
         //创建jspdf对象
         // let image = new Image();
         // //解决跨域问题
         // image.setAttribute('crossOrigin', 'anonymous');
         let PDF=new jsPDF("","pt","a4")
         // debugger;
         //判断是否分页
         if(leftHeight<pageHeight){
            PDF.addImage(pageData,"JPEG",0,0,imgWidth,imgHeigth)
         }else{
            while(leftHeight>0){
               PDF.addImage(pageData,"JPEG",0,position,imgWidth,imgHeigth)
               leftHeight-=pageHeight
               position-=841.89
               if (leftHeight>0) {
                  PDF.addPage()
               }
            }
         }
         //保存文件
         PDF.save(title+".pdf")
      })
   }
}

export default hmtlToPdf

使用

<div id="pdfDom"></div>
import hmtlToPdf from './PDF.js'
hmtlToPdf.getPdf('这是一个pdf')

浏览

<embed src='http://xxxx#scrollbars=0&toolbar=0&statusbar=0'
 width="1200px" height="1020px"/>

XDOC文档预览服务

window.open("https://view.xdocin.com/view?
src=" + encodeURIComponent("https://wenjun-1313175594.cos.apnanjing.myqcloud.com/test/word.doc")
 + "&watermark=" + encodeURIComponent("view.xdocin.com"));

更多配置XDOC文档预览服务