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 相关文章推荐
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
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
星际中的相关伤害
2020/03/04 星际争霸
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python中pygame安装方法图文详解
2015/11/11 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python批量修改图片大小的方法
2018/07/24 Python
Python字典对象实现原理详解
2019/07/01 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python新手学习raise用法
2020/06/03 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
Python 图片处理库exifread详解
2021/02/25 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
优秀三好学生事迹材料
2014/08/31 职场文书
民间个人借款协议书
2014/09/30 职场文书
小学生优秀评语
2014/12/29 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
校园之声广播稿
2015/08/18 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android