Vue导出PDF

叁歲伎倆 2021-07-25 12:36 593阅读 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 条评论，593人围观）

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

相关阅读

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

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

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

相关 vue导出并定制PDF样式

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

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

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

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

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

相关 PDF报表导出

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

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

相关 Navicat导出pdf

[开发十年，就只剩下这套Java开发体系了 >>> ][Java_ _] ![hot3.png][] 1、选择打印数据库 ![174444_jsQL_182501.png

港控/mmm°/ 2022年04月22日 00:24/ 0 赞/ 300 阅读

相关 Navicat导出pdf

1、选择打印数据库 ![174444_jsQL_182501.png][] 2、保存pdf 文件-》打印为-》pdf [174444_jsQL_182501.

╰半夏微凉°/ 2022年04月17日 05:46/ 0 赞/ 382 阅读

相关导出pdf文件

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

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

相关 js导出pdf

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

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

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

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

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

相关 Vue导出PDF

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

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