Vue如何将页面导出成PDF文件


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了Vue将页面导出成PDF文件的具体代码,供大家参考,具体内容如下

我在前端岗位上要实现个可视化图表页的PDF文件导出,在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法。

1. 下载npm包

npm install html2canvas
npm install jspdf

2. 创建插件.js文件

Vue-cli项目的话是在./utils文件夹下,我在这里使用的nuxt框架,所以是在./plugins文件夹下。

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

export default {
 install (Vue, options) {
  Vue.prototype.getPdf = function () {
   var title = this.pdfTitle; // 导出的pdf文件名
   html2Canvas(document.querySelector(this.pdfSelector), { //导出的html元素
    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');
   })
  }
 }
}

上面的插件代码可以直接复制,然后在引用的Vue文件中填入自己的参数就可以了。

3. 修改引用页面

导出按钮调用getPdf方法,data填入参数。

<template>
 <div id="pdfPrint">
    <!-- 调用getPdf方法 -->
    <el-button @click="getPdf('#pdfPrint')">保存为PDF</el-button>
 </div>
</template>

<script>
export default {
 data() {
  return {
   // 填入导出的pdf文件名和html元素
   pdfTitle: '因子评价报告',
   pdfSelector: '#pdfPrint',
  }
 },

大概就是这样啦,非常地简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 #Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 #Javascript
three.js着色器材质的内置变量示例详解
Aug 16 #Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
Vue使用axios引起的后台session不同操作
Aug 14 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
基于header的一些常用指令详解
2013/06/06 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
jquery的live使用注意事项
2014/02/18 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python绘制热力图heatmap
2020/03/23 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
实习教师个人的自我评价
2013/11/08 职场文书
晚宴邀请函范文
2014/01/15 职场文书
大四毕业生自荐书
2014/07/05 职场文书
标准版离职证明书
2014/09/12 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
党员示范岗材料
2014/12/19 职场文书
环保主题班会教案
2015/08/13 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL