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 中文文档 - Spinner微调器使用
Oct 21 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
React.js入门学习第一篇
Mar 30 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue 实现单选框设置默认选中值
Nov 07 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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 mssql 时间格式问题
2009/01/13 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
连接Python程序与MySQL的教程
2015/04/29 Python
快速了解Python相对导入
2018/01/12 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
军训学生自我鉴定
2014/02/12 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
小学科学课教学反思
2016/02/23 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
MYSQL 表的全面总结
2021/11/11 MySQL