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使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 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构造函数实例讲解
2013/11/13 PHP
Django 中 cookie的使用
2017/08/17 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python 制作糗事百科爬虫实例
2016/09/22 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python实时监控logstash日志代码
2020/04/27 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
日语求职信范文
2013/12/17 职场文书
机械个人求职信范文
2014/01/24 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
销售口号大全
2014/06/11 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
同学会邀请函模板
2015/01/30 职场文书
大学生团员个人总结
2015/02/14 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android