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 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
js实现拖拽效果
Feb 12 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue中的适配px2rem示例代码
Nov 19 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
Vue实现push数组并删除的例子
Nov 01 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
提升PHP执行速度全攻略(下)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript中数组的冒泡排序使用示例
2013/12/18 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
详解ES6中class的实现原理
2020/10/03 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
python实现文本文件合并
2015/12/29 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
参观监狱心得体会
2014/01/02 职场文书
大学旷课检讨书
2014/01/28 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
运动会邀请函范文
2014/02/06 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
主管竞聘书范文
2014/03/31 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis