vue2 将页面生成pdf下载

news2024/9/28 12:50:27

项目场景：

在项目开发的过程中，经常有下载一些报表，有部分要求文档是pdf格式的文件，这时候可以插件快速地搭建一个将页面生成pdf文件的功能。

依赖支持

本次项目中主要使用的nodejs: 14.20.0，npm版本是6.14.17。

npm install --save jspdf
npm install --save html2canvas;
npm install vue-router@3

实施步骤：

1、创建vue2项目

2、配置路由 router

3、搭建下载功能

创建utils文件夹，文件夹内创建htmlToPdf.js文件，并将其加载在main.js

import htmlToPdf from '@/utils/htmlToPdf'

Vue.use(htmlToPdf)

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    
  install(Vue) {
    /**
     * 
     * @param {*} reportName 下载时候的标题
     * @param {*} isDownload  是否下载默认为下载，传false不下载
     */
    Vue.prototype.getPdf = function (reportName, isDownload = true) {
      //     var target = document.getElementsByClassName("right-aside")[0];
      // target.style.background = "#FFFFFF";
      return new Promise((resolve, reject) => {
        var title = reportName;
        html2Canvas(document.querySelector('#app'), {
          allowTaint: true
        }).then((canvas) => {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          //一页pdf显示html页面生成的canvas高度;
          let pageHeight = contentWidth / 592.28 * 841.89
          //未生成pdf的html页面高度
          let leftHeight = contentHeight
          //页面偏移
          let position = 0
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              //避免添加空白页
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          if (isDownload) {
            PDF.save(title + '.pdf')
          }
          // 删除本地存储的base64字段
          var pdfData = PDF.output('datauristring')//获取base64Pdf
          resolve(pdfData)
        } 
        ).catch(error=>{
            reject(error)
        })
      })
    }
  }
}

4、开发功能,其中代码如下。初步的使用，已经可以下载pdf，具体的使用，需要根据自身的需求进行调整。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a @click="initData()" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <button @click="toGetPdf()">下载PDF</button>//这种情况是只下载，不上传后端
    <!-- <button @click="toGetPdf(1, 0)">下载PDF</button>//这种情况是只走上传后端接口，不下载 -->

    
  </div>
</template>

<script>
import { jsPDF } from "jspdf";

// Default export is a4 paper, portrait, using millimeters for units

export default {
  name: 'HelloWorld',
  data(){
    return {
      actName:'1111'
    }
  },
  methods:{
    initData(){
      const doc = new jsPDF();

      doc.text("Hello world!", 10, 10);
      doc.save("a4.pdf");
    },
    toGetPdf( ) {
      /**
     * val 决定走不走上传接口，默认为不上传给后端
     * download 默认是下载
     * /
 
      /* */
      this.$nextTick(() => {
        setTimeout(() => {
          window.scrollTo(0, 0);     //这行代码很重要，它让页面的滚动条跳到了最上方如果点击打印按钮的时候,滚动条没有在最上方,打印内容会是不完整的,体验也会差
          let title ="pdf文件"
          this.getPdf(title, true) //download：false为不下载，这里调用了刚刚引用的全局函数，.then得到的值是base64位的pdf文件
           
        }, 1000);
      });
    },
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>