vue导出pdf文件

Posted 2023-02-21 晚星@

根据页面的布局去导出，比如字体，字号，颜色，段落间距等，需要用css去设计好，然后去导出，但是导出的是按a4纸的尺寸导出的，所以细节需要不断的去优化。

页面效果

把页面dom元素，模拟成一张画布，然后把画布转为一张图片，在把图片转为pdf去下载。

需要的依赖以下两个

"html2canvas": "^1.4.1",
"jspdf": "^2.5.1"

html

    <div id="demo" style="font-size:22px;padding:70px 250px 0;">
      <div>记账凭证</div>
      <div style="clear:both;margin-top:30px;">
        <div class="leftDiv">公司代码: 4360</div>
        <div class="rightDiv">页码:1/2页</div>
      </div>
      <div style="clear:both;">
        <div class="leftDiv">单位代码: 4360</div>
        <div class="rightDiv">公司代码凭证号:</div>
      </div>
      <div style="clear:both;">
        <div class="leftDiv">公司名称: 中国石油化工股份有限公司石油工程技术研究院 </div>
        <div class="rightDiv">系统凭证号: SA1400000003 </div>
      </div>
      <div style="clear:both;display:flex;">
        <div style="flex:auto;text-align:left;">公司名称: 中国石油化工股份有限公司石油工程技术研究院 </div>
        <div style="flex:auto;">记账日期:2016年12月31日 </div>
        <div style="flex:auto;text-align:right;">附件: </div>
      </div>
      <div class="tableDiv" style="margin-top:30px;">
        <table style="width:100%;text-align:left;">
          <thead>
            <tr>
              <td>摘要</td>
              <td>科目编码</td>
              <td>科目名称</td>
              <td>借方金额</td>
              <td>贷方金额</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>收新疆天业股份有限公司承兑汇票</td>
              <td>1111010000</td>
              <td>银存-人民币-活期-建行-21</td>
              <td>0</td>
              <td>300000.000000</td>
            </tr>
            <tr v-for="(item,index) in 40" :key="index">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="display:flex;text-align:left;margin-top:30px;">
        <div style="flex:1;">会计负责人:</div>
        <div style="flex:1;">复合人:</div>
        <div style="flex:1;">制证人:</div>
        <div style="flex:1;">经办人:</div>
        <div style="flex:1;">出纳:</div>
      </div>
    </div>
    <br>
    <button @click="exporta">导出凭证</button>

js

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'


    function exporta() 
      exportaa(document.querySelector('#demo'), '我的PDF');
    

    // 导出pdf
    function exportaa(ele, pdfName) 

      let eleW = ele.offsetWidth;// 获得该容器的宽
      let eleH = ele.offsetHeight;// 获得该容器的高


      let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
      let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

      var canvas = document.createElement("canvas");
      var abs = 0;

      let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
      let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

      if (win_out > win_in) 
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in) / 2;    // 获得滚动条宽度的一半
      

      canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;

      var context = canvas.getContext("2d");

      context.scale(2, 2);

      context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
      // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
      // translate的时候，要把这个差值去掉

      // html2canvas(element).then( (canvas)=> //报错
      // html2canvas(element[0]).then( (canvas)=>
      html2canvas(ele, 
        dpi: 300,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
      ).then((canvas) => 
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new JsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) 
          //在pdf.addImage(pageData, \\'JPEG\\', 左，上，宽度，高度)设置在pdf中显示；
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          // pdf.addImage(pageData, \\'JPEG\\', 20, 40, imgWidth, imgHeight);
         else     // 分页
          while (leftHeight > 0) 
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) 
              pdf.addPage();
            
          
        

        //可动态生成
        pdf.save(pdfName);
      )