vue项目中页面生成pdf并下载，vue 中页面转PDF

最新推荐文章于 2024-10-07 16:17:05 发布

@本宫微胖@

最新推荐文章于 2024-10-07 16:17:05 发布

阅读量1.9w

点赞数

分类专栏： vue 技术整理文章标签： vue js

本文链接：https://blog.csdn.net/yuenandehutu/article/details/105413124

版权

本文介绍如何在Vue项目中将页面转换为PDF并进行下载。首先，通过安装插件来实现这一功能，然后定义全局函数htmlToPdf.js。最后，在main.js中引入并全局引用该函数，实现页面到PDF的转换。

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

第一步、安装插件

// 第一个.将页面html转换成图片
npm install --save html2canvas
// 第二个.将图片生成pdf
npm install jspdf --save

定义全局函数,创建一个htmlToPdf.js文件在指定位置.

// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
      var element = document.getElementById("pdfCentent")
      html2canvas(element, {
        logging: false
      }).then(function (canvas) {
        var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
        var ctx = canvas.getContext("2d")
        var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
        var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
        var renderedHeight = 0
 
        while (renderedHeight < canvas.height) {
          va