[Vue3]PDF的生成、预览与下载

一树冬青 2024-10-22
49 阅读 0 评论 0 点赞
预览
  1. const PDFPreview = (url) => {
  2.   window.open(url,''_blank''); // 新窗口打开生成的图像
  3. }

下载
  1. const PDFDown = async (url) => {
  2.   const response = await axios.get(url, { responseType: ''blob'' });
  3.   const pdfUrl = window.URL.createObjectURL(new Blob([response.data]));
  4.   const link = document.createElement(''a'');
  5.   link.href = pdfUrl;
  6.   link.setAttribute(''download'', ''专题图.pdf''); // 设置下载后保存的文件名
  7.   document.body.appendChild(link);
  8.   link.click();
  9.   document.body.removeChild(link);
  10. }

生成

需求：截取某个div中的内容生成pdf文件，可自定义pdf大小，支持下载与预览

在div中添加 ref="thematicMap" ，定义 const thematicMap = ref(null)

在pdf.js中

  1. import html2canvas from "html2canvas";
  2. import jsPDF from "jspdf";
  3.  
  4. export const  downloadPDF = (page,type,value) => {
  5.     return new Promise((resolve, reject) => {
  6.         html2canvas(page, {
  7.             useCORS: true,
  8.             scale: 4,
  9.         }).then(function (canvas) {
  10.             let pdfBlob = canvas2PDF(canvas, type, value);
  11.             resolve(pdfBlob);
  12.         }).catch(function (error) {
  13.             reject(error);
  14.         });
  15.     });
  16. };
  17.  
  18. const canvas2PDF = (canvas,type,value) => {
  19.     let contentWidth = canvas.width;
  20.     let contentHeight = canvas.height;
  21.     let imgWidth;
  22.     let imgHeight;
  23.     let direction;
  24.     let paper;
  25.     let title;
  26.     //type 1a4横向 2a4纵向 3a3横向 4a3纵向
  27.     //a4纸的尺寸210x297 a3 297x420
  28.     if(type.paper===''自定义''){
  29.         let height = contentHeight/297
  30.         let width = contentWidth/420
  31.         if(width<height){
  32.             imgHeight = 297;
  33.             imgWidth = 297/contentHeight * contentWidth;
  34.         }else {
  35.             imgWidth = 420;
  36.             imgHeight = 420/contentWidth * contentHeight;
  37.         }
  38.         direction = "l"
  39.         paper = ''a3''
  40.         title = ''A3横向''
  41.     }else if(type.paper===''A4横向''){
  42.         imgHeight = 210;
  43.         imgWidth = 297;
  44.         direction = "l"
  45.         paper = ''a4''
  46.         title = ''A4横向''
  47.     }else if(type.paper===''A4纵向''){
  48.         imgWidth = 210;
  49.         imgHeight = 297;
  50.         direction = "p"
  51.         paper = ''a4''
  52.         title = ''A4纵向''
  53.     }else if(type.paper===''A3横向''){
  54.         imgHeight = 297;
  55.         imgWidth = 420;
  56.         direction = "l"
  57.         paper = ''a3''
  58.         title = ''A3横向''
  59.     }else if(type.paper===''A3纵向''){
  60.         imgWidth = 297;
  61.         imgHeight = 420;
  62.         direction = "p"
  63.         paper = ''a3''
  64.         title = ''A3纵向''
  65.     }
  66.     // 第一个参数： l：横向  p：纵向
  67.     // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
  68.     let pdf = new jsPDF(direction, "mm",paper);
  69.     pdf.addImage(
  70.         canvas.toDataURL("image/jpeg", 1.0),
  71.         "JPEG",
  72.         0,
  73.         0,
  74.         imgWidth,
  75.         imgHeight
  76.     );
  77.     if(value===''0''){
  78.         //添加内容到 doc
  79.         const blob = pdf.output(''blob'')
  80.         //创建用于预览的 URL
  81.         const url = URL.createObjectURL(blob)
  82.         //显示 PDF 预览，例如在一个新窗口中
  83.         window.open(url,''_blank''); // 新窗口打开生成的图像
  84.     }else if(value===''1''){
  85.         pdf.save("专题制图导出"+title+".pdf");
  86.     }
  87.     else if(value===''2''){
  88.         // 将 pdf 数据转换为 Blob 对象
  89.         const blob = pdf.output(''blob'')
  90.         let pdfFile = new File([blob], "专题制图导出"+title+".pdf", { type: ''application/pdf'' });
  91.         return pdfFile
  92.     }
  93. };

在vue组件中引用根据传入的dom生成pdf，根据传入的type决定是预览、下载还是返回pdf文件

预览

downloadPDF(thematicMap.value,ployForm.value,type)

获取pdf文件并上传

  1.   downloadPDF(thematicMap.value,ployForm.value,type).then((a)=>{
  2.     pdfFile = a
  3.     //执行上传方法
  4.   })
标签： 技术社区

相关文章