Vue 页面导出成PDF文件
注意事项
- 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合
安装依赖
npm install html2Canvas --save
npm install jspdf--save
封装Class
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { Loading } from 'element-ui'
let loading
export default class PadDownloader {
static install(Vue, options) {
Vue.prototype.downloadPdf = function (options) {
loading = Loading.service({
lock: true,
text: '正在下载文件...',
background: 'rgba(0,0,0,.5)'
})
const title = options.title
const content = document.querySelector('#' + options.selector)
html2Canvas(content, {
allowTaint: true,
useCORS: 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()
}
}
}
loading.close()
PDF.save(title + '.pdf')
})
}
}
}
注册全局组件(main.js)
// main.js
Vue.use(PadDownloader)
// 在其他的页面直接使用全局方法`downloadPdf `
使用 (vue 单文件组件)
<div>
<el-button
type="primary"
style="margin-left: 300px;"
v-on:click="downloadPdf({title:'投标文件',selector:'pdf-container'})"
>下载商务文件</el-button>
</div>
Vue 页面导出成PDF文件的更多相关文章
- 【php导出pdf文件】php将html 导出成pdf文件(MPDF60),支持完美分页,注意是完美!!
1.使用 MPDF60 包 2.防止中文乱码:修改MPDF/MPDF60/config.php中 $this->autoLangToFont = true; $this->autoScri ...
- vue将页面导出成pdf
npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...
- 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
- Nodejs 中将html转换成pdf文件
Nodejs 中将html转换成pdf文件,Nodejs Convert html into pdf 1. 下载phantomjs.exe,将该文件放在根目录 2. 编写pdf.js文件(在githu ...
- 把页面上的图表导出为pdf文件,分享一种请求下载文件的方法
最近客户提出一个需求,就是把页面上的图表导出为pdf文件. 找了很多资料.终于有了点头绪.最主要是参考了HighCharts的做法.http://www.hcharts.cn/ 实现原理:把页面图表的 ...
- 页面直接导出为PDF文件,支持分页与页边距
将WEB页面直接导出为pdf文件是经常会用到的一个功能,尤其是各种报表系统.总结了一下目前几种主流的做法: 在后端用代码生成pdf文件,比如iText一类: 在后端抓取页面并生成pdf文件,比如pha ...
- Django分析之导出为PDF文件
最近在公司一直忙着做exe安装包,以及为程序添加新功能,好久没有继续来写关于Django的东西了….难得这个周末清闲,来了解了解Django的一些小功能也是极好的了~ 那今天就来看看在Django的视 ...
- SpringBoot 集成Swagger2自动生成文档和导出成静态文件
目录 1. 简介 2. 集成Swagger2 2.1 导入Swagger库 2.2 配置Swagger基本信息 2.3 使用Swagger注解 2.4 文档效果图 3. 常用注解介绍 4. Swagg ...
- Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF
1.常见用法 using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...
随机推荐
- nginx: command not found
nginx 正常启动,可以访问服务器地址:welcome to nginx 使用nginx -t 等命令时 报错:nginx: command not found 这是环境变量未配置 配置环境变量 v ...
- DEP(Data Execution Prevention) 数据执行保护
1.原理 数据执行保护,简称“DEP”,英文全称为“Data Execution Prevention”,是一组在存储器上运行额外检查的硬件和软件技术,有助于防止恶意程序码在系统上运行. 此技术由Mi ...
- 高效C++:模板和泛型编程
模板和泛型编程的关注重点在编译期,所有的行为都在编译期确定,因此其规则和玩法也有自己特殊的一套,和其他模块不通用. 了解隐式接口和编译期多态 元编程------编译器多态,决定哪个重载函数被调用 cl ...
- Python 脚本语言
python 脚本语言(python的命名起源于一个脚本screenplay,每次运行都会使对话框逐字重复.由著名的“龟叔”Guido van Rossum在1989年圣诞节期间编写.) Python ...
- 【Kafka】Kafka测试时控制台日志级别修改
在学习Kafka客户端时日志打的飞起,根本看不到自己发的消息,找了半天网上竟然没有这方面的资料.想了下依赖关系,这里应该只要把slf4j的日志级别调整应该就ok了. static { LoggerCo ...
- 读懂操作系统之快表(TLB)原理(七)
前言 前不久.我们详细分析了TLB基本原理,本节我们通过一个简单的示例再次叙述TLB的算法和原理,希望借此示例能加深我们对TLB(又称之为快表,深入理解计算机系统(第三版)又称之为翻译后备缓冲区)的理 ...
- hostapd阅读(openwrt)-4
接下来,咱们来看看hostapd的源码目录之hostapd,今天我们先分析整体功能,然后从main.c开始注释 hostapd下代码主要作用有:配置解析,环境初始化,控制接口建立,AP接口管理模块. ...
- Merging 和 Rebasing 的大比拼
虽然 merging 和 rebasing 在 git 中相似时,但他们提供不同的功能.为了让你的历史尽可能的干净和完整,你应该知道以下几点. git rebase 命令已 神奇的 Git voodo ...
- PHP array_intersect_uassoc() 函数
实例 比较两个数组的键名和键值(使用用户自定义函数比较键名),并返回交集: <?phpfunction myfunction($a,$b){if ($a===$b){return 0;}retu ...
- PHP readlink() 函数
定义和用法 readlink() 函数返回符号连接的目标. 如果成功,该函数返回连接的目标.如果失败,则返回 FALSE. 语法 readlink(linkpath) 参数 描述 linkpath 必 ...