vue 应用PDF，将页面部分内容导出为PDF

m0_47087830

已于 2023-08-15 16:27:34 修改

阅读量505

点赞数 1

文章标签： vue.js pdf 前端 javascript

于 2023-08-15 16:19:43 首次发布

本文链接：https://blog.csdn.net/m0_47087830/article/details/132301330

版权

这篇博客介绍了如何在Vue.js应用中实现将页面指定部分（id为downLoadPdf的内容）导出为PDF文件。首先，需要安装html2Canvas和jspdf两个依赖库。然后，将它们引入到项目中，并添加导出事件。通过html2Canvas将页面内容转换为图片，再利用jspdf将图片放入PDF画布，最终生成PDF文档。为了达到更好的效果，建议在要导出的模板区域内（id=downLoadPdf）创建清晰的布局。

摘要由CSDN通过智能技术生成

1、安装依赖

html2Canvas，jspdf

2、引入页面

import html2Canvas from "html2canvas";

import JsPDF from "jspdf";

3、导出事件，页面转换为图片，再把图片放入pdf画布

getPdf() {

      return new Promise((resolve) => {

        html2Canvas(document.querySelector("#downLoadPdf"), {

          allowTaint: false,

          useCORS: true, // allowTaint、useCORS只能够出现一个

          imageTimeout: 0,

          dpi: 300, // 像素

          scale: 4, // 图片大小

        }).then(function (canvas) {

          // 用于将canvas对象转换为base64位编码

          let pageData = canvas.toDataURL("image/jpeg", 1.0),

            canvasWidth = canvas.width,

            canvasHeight = canvas.height,

            concentWidth = 842,

            concentHeight = Math.round(

              (concentWidth / canvasWidth) * canvasHeight

            ),

            po