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 09 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 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/11/26 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
办公室副主任职责范本
2014/03/08 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL