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>

项目总结:

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

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

相关推荐
吃杠碰小鸡34 分钟前
commitlint校验git提交信息
前端
天天进步20151 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐2 小时前
前端图像处理(一)
前端
程序猿阿伟2 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax