vue2 将页面生成pdf下载

项目场景:

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


依赖支持

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

javascript 复制代码
npm install --save jspdf
npm install --save html2canvas;
npm install vue-router@3

实施步骤:

1、创建vue2项目

2、配置路由 router

3、搭建下载功能

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

javascript 复制代码
import htmlToPdf from '@/utils/htmlToPdf'

Vue.use(htmlToPdf)
javascript 复制代码
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,具体的使用,需要根据自身的需求进行调整。

javascript 复制代码
<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>

项目总结:

方法并不是很难,稍微了解,说不定以后得项目中,会使用到。

从项目中学习,然后自己重构,有助于自身快速的成长。

相关推荐
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询