Vue导出PDF

叁歲伎倆 2021-07-25 12:36 615阅读 0赞

# 一、下载 #

cnpm i -S html2canvas jspdf

html2canvas:将页面转化为图片

jspdf:将图片生成PDF

# 二、创建htmlToPdf.js #

个人习惯放在src/utils/htmlToPdf.js

// 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default{
      install (Vue, options) {
        Vue.prototype.getPdf = function (title) {
          html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true
          }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            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()
                }
              }
            }
            PDF.save(title + '.pdf')
          }
          )
        }
      }
    }

# 三、在main.js中使用我们定义的函数文件 #

import htmlToPdf from '@/components/utils/htmlToPdf'
    Vue.use(htmlToPdf)

# 四、调用getPdf方法 #

给要导出的div中加上一个 **id="pdfDom"**

<el-button @click="**getPdf**('pdf文件名')">打印</el-button>

发表评论取消回复

表情：

评论列表（有 0 条评论，615人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot整合PDF导出实现Vue下载

> 本文参考至以下文章编写： > 文章题目： SpringBoot导出数据为PDF > 文章作者：Archie\_java > 链接：http://t.csdn.c

布满荆棘的人生/ 2024年03月31日 13:13/ 0 赞/ 127 阅读

相关 036：vue导出页面生成pdf文件

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第036个查看专栏目录: [VUE][] \-

ゞ浴缸里的玫瑰/ 2024年03月02日 02:58/ 0 赞/ 14 阅读

相关 Vue html导出到pdf

1.npm下载jspdf npm install html2canvas jspdf --save 2.创建一个htmlToPdf.js文件，输入以下内容

水深无声/ 2023年10月04日 18:43/ 0 赞/ 19 阅读

相关 vue导出并定制PDF样式

目录 1.前言 2.效果图部分截图举例编辑 3.步骤 3.1 下载插件 3.2 src/utils目录下新建jsPdf.js文件，将以下代码粘贴进去 3.3

灰太狼/ 2023年09月27日 11:56/ 0 赞/ 138 阅读

相关 vue导出pdf(自定义页面大小)

首先下载 html2canvas 和 jspdf插件 import html2canvas from 'html2canvas' import JsPDF f

素颜马尾好姑娘i/ 2022年11月28日 10:37/ 0 赞/ 738 阅读

相关 PDF报表导出

使用IText PDF 类库导出： 1.导入依赖： <dependency> <groupId>com.lowagie</grou

超、凢脫俗/ 2022年05月12日 05:10/ 0 赞/ 320 阅读

相关导出pdf文件

知识点 IText中用文本块(Chunk)、短语(Phrase)和段落(paragraph)处理文本文本块(Chunk)是处理文本的最小单位短语(P

偏执的太偏执、/ 2021年12月11日 23:43/ 0 赞/ 574 阅读

相关 js导出pdf

方法一： function htmlToPdf(){ html2canvas($('lastcontent'), { //appmsg 为选择要

分手后的思念是犯贱/ 2021年09月18日 10:56/ 0 赞/ 439 阅读

相关 Vue导出页面为PDF格式，解决导出pdf模糊问题

1 、我们要添加两个模块第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pd

待我称王封你为后i/ 2021年07月26日 17:59/ 0 赞/ 1682 阅读

相关 Vue导出PDF

一、下载 cnpm i -S html2canvas jspdf html2canvas:将页面转化为图片 jspdf:将图片生成PDF 二、创建html

叁歲伎倆/ 2021年07月25日 12:36/ 0 赞/ 616 阅读