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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
python实现简单中文词频统计示例
2017/11/08 Python
git进行版本控制心得详谈
2017/12/10 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
车间调度岗位职责
2013/11/30 职场文书
班组长岗位职责范本
2014/01/05 职场文书
小学生演讲稿
2014/01/12 职场文书
求职信内容怎么写
2014/05/26 职场文书
立志成才演讲稿
2014/09/04 职场文书
借款民事起诉状范文
2015/05/19 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
golang生成vcf通讯录格式文件详情
2022/03/25 Golang