基于Vue实现HTML转PDF并导出
目录
- 前言
- 方案一
- 问题
- 解决方案
- 方案二
- 使用
- 问题及解决方案
- 方案三（推荐）
- 总结
前言
近期公司提出了一个新需求，希望前端能够根据UI设计绘制运动报告界面，完成数据展示，包括图标展示，并且能够将HTML页面转为PDF并实现下载。基于公司需求，查询了很多资料，最后选定了三种技术方案，并完成Demo,当然三种方案都有优缺点，所以还需要老大根据效果选定最终实现方案。
方案一
window.print浏览器打印是一个非常成熟的东西，直接调用window.print或者document.execCommand('print')达到打印及保存效果，Mac徽标键加p直接调用查看效果，windows可以ctrl+p查看效果
问题
- 样式的调节
- 隐藏某些页面不相关内容
- A4纸界面的适应
解决方案
1.媒介查询
p {
font-size: 12px;
}
@media print {
p {
font-size: 14px;
}
}
// 隐藏部分内容
@media print {
span {
display:none
}
}
2.替换body内容
根据id获取需要打印的节点innderHTML，并将body内容进行替换，执行打印，打印完成后，还原body内容。
<body>
<input type="button" value="打印此页面" onclick="printpage()" />
<div id="printContent">打印内容</div>
<script>
function printpage() {
let newstr = document.getElementById("printContent").innerHTML;
let oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
</body>
3.打印事件监听
通过打印前事件onbeforeprint及打印后事件onafterprint() 进行打印元素的隐藏及展示
window.onbeforeprint = function(event) {
//隐藏无关元素
};
window.onafterprint = function(event) {
//展示无关元素
};
使用参考文档
方案二
html2canvas + jspdf，使用html2canvas将使用canvas将页面转为base64图片流，并插入jspdf插件中，保存并下载pdf。
使用
1.安装：npm install --save htmlcanvas2npm install --save jspdf
2.绘制较短页面
新建htmlToPdf.js导出文件
// utils/htmlToPdf.js：导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
// id-导出pdf的div容器；title-导出文件标题
Vue.prototype.htmlToPdf = (id, title) => {
const element = document.getElementById(`${id}`)
const opts = {
scale: 12, // 缩放比例，提高生成图片清晰度
useCORS: true, // 允许加载跨域的图片
allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
tainttest: true, // 检测每张图片已经加载完成
logging: true // 日志开关，发布的时候记得改成 false
}
html2Canvas(element, opts)
.then((canvas) => {
console.log(canvas)
const contentWidth = canvas.width
const contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89
// 未生成pdf的html页面高度
let leftHeight = contentHeight
// 页面偏移
let position = 0
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28
const imgHeight = (592.28 / contentWidth) * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
console.log(pageData)
// a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
const PDF = new JsPDF('', 'pt', 'a4')
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
// addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
// 超过一页时，分页打印（每页高度841.89）
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')
})
.catch((error) => {
console.log('打印失败', error)
})
}
}
}
index.vue中使用导出方法
<template>
<div>
<div
id="pdfDom"
>
测试数据
</div>
<el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button>
</div>
</template>
<script>
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
mounted() {
// 导出pdf
btnClick() {
this.$nextTick(() => {
this.htmlToPdf('pdfDom', '个人报告')
})
},
},
</script>
问题及解决方案
1.页面绘制转码时间过长
可以考虑在页面初始化完成后就对页面进行抓取绘制及转码，将转码数据保存，在点击下载时直接生成pdf并保存。
2.html2canvas能够抓取的页面长度大约为1440，两个A4页面左右，超出不会抓取，需要控制多个节点，循环绘制
绘制多个节点
新建htmlToPdf.js导出文件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
// id-导出pdf的div容器；title-导出文件标题
Vue.prototype.htmlToPdf = (name, title) => {
const element = document.querySelectorAll(`.${name}`)
let count = 0
const PDF = new JsPDF('', 'pt', 'a4')
const pageArr = []
const opts = {
scale: 12, // 缩放比例，提高生成图片清晰度
useCORS: true, // 允许加载跨域的图片
allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
tainttest: true, // 检测每张图片已经加载完成
logging: true // 日志开关，发布的时候记得改成 false
}
for (const index in Array.from(element)) {
html2Canvas(element[index], opts).then(function(canvas) {
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const contentWidth = canvas.width
const contentHeight = canvas.height
const imgWidth = 595.28
const imgHeight = (592.28 / contentWidth) * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89
// 未生成pdf的html页面高度
const leftHeight = contentHeight
pageArr[index] = { pageData: pageData, pageHeight: pageHeight, leftHeight: leftHeight, imgWidth: imgWidth, imgHeight: imgHeight }
if (++count === element.length) {
// 转换完毕，可进行下一步处理 pageDataArr
let counts = 0
for (const data of pageArr) {
// 页面偏移
let position = 0
// 转换完毕，save保存名称后浏览器会自动下载
// 当内容未超过pdf一页显示的范围，无需分页
if (data.leftHeight < data.pageHeight) {
// addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
PDF.addImage(data.pageData, 'JPEG', 0, 0, data.imgWidth, data.imgHeight)
} else {
// 超过一页时，分页打印（每页高度841.89）
while (data.leftHeight > 0) {
PDF.addImage(data.pageData, 'JPEG', 0, position, data.imgWidth, data.imgHeight)
data.leftHeight -= data.pageHeight
position -= 841.89
if (data.leftHeight > 0) {
PDF.addPage()
}
}
}
if (++counts === pageArr.length) {
PDF.save(title + '.pdf')
} else {
// 未转换到最后一页时，pdf增加一页
PDF.addPage()
}
}
}
})
}
}
}
}
index.vue中使用导出方法
<template>
<div>
<div
class="pdfDom"
>
测试数据
</div>
<div
class="pdfDom"
>
测试数据2
</div>
<div
class="pdfDom"
>
测试数据3
</div>
<el-button type="primary" round style="background: #4849FF" @click="btnClick">导出PDF</el-button>
</div>
</template>
<script>
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
mounted() {
// 导出pdf
btnClick() {
this.$nextTick(() => {
this.htmlToPdf('pdfDom', '个人报告')
})
},
},
</script>
实现效果
方案三（推荐）
puppeteer(中文翻译”操纵木偶的人”) 是 Google Chrome 团队官方的无界面（Headless）Chrome 工具，它是一个 Node 库，提供了一个高级的 API 来控制 DevTools协议上的无头版 Chrome 。也可以配置为使用完整（非无头）的 Chrome。
Puppeteer 能做些什么
- 生成页面的截图和PDF。
- 抓取SPA并生成预先呈现的内容（即“SSR”）。
- 从网站抓取你需要的内容。
- 自动表单提交，UI测试，键盘输入等
- 创建一个最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
- 捕获您的网站的时间线跟踪，以帮助诊断性能问题。
我们只需关注并使用生成页面的截图PDF功能
Puppeteer的使用
使用express框架搭建简单的node服务
安装:
npm i puppeteer 或 yarn add puppeteer
1.单个页面生成
var express = require('express');
var app = express();
// 路由中间件：get请求"/"资源
app.get('/', function (req, res) {
res.send('Hello11 World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
//指定存放pdf的文件夹
const folder = 'vueDoc'
fs.mkdir(folder, () => { console.log('文件夹创建成功') })
//启动无头浏览器
const browser = await puppeteer.launch({ headless: true }) //PDF 生成仅在无界面模式支持, 调试完记得设为 true
const page = await browser.newPage();
await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默认会等待页面load事件触发
//指定生成的pdf文件存放路径
await page.pdf({ path: `./vueDoc/guide.pdf` });
//关闭页面
page.close()
//关闭 chromium
browser.close();
})()
2.根据页面侧边栏循环生成多个页面
var express = require('express');
var app = express();
// 路由中间件：get请求"/"资源
app.get('/', function (req, res) {
res.send('Hello11 World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
//指定存放pdf的文件夹
const folder = 'vueDoc'
fs.mkdir(folder, () => { console.log('文件夹创建成功') })
//启动无头浏览器
const browser = await puppeteer.launch({ headless: true }) //PDF 生成仅在无界面模式支持, 调试完记得设为 true
const page = await browser.newPage();
await page.goto('https://cn.vuejs.org/v2/guide/index.html'); //默认会等待页面load事件触发
// 1) 已知Vue文档左侧菜单结构为：.menu-root>li>a
// 获取所有一级链接
const urls = await page.evaluate(() => {
return new Promise(resolve => {
const aNodes = $('.menu-root>li>a')
const urls = aNodes.map(n => {
return aNodes[n].href
})
resolve(urls);
})
})
// 2）遍历 urls, 逐个访问并生成 pdf
let successUrls = [], failUrls = [] // 用于统计成功、失败情况
for (let i = 17; i < urls.length; i++) {
const url = urls[i],
tmp = url.split('/'),
fileName = tmp[tmp.length - 1].split('.')[0]
try {
await page.goto(url); //默认会等待页面load事件触发
await page.pdf({ path: `./${folder}/${i}_${fileName}.pdf` }); //指定生成的pdf文件存放路径
console.log(`${fileName}.pdf 已生成！`)
successUrls.push(url)
} catch {
//如果页面打开超时，会抛出错误。为了保证后面的页面生成不被影响，这里做一下容错处理。
failUrls.push(url)
console.log(`${fileName}.pdf 生成失败！`)
continue
}
}
console.log(`PDF生成完毕！成功${successUrls.length}个，失败${failUrls.length}个`)
console.log(`失败详情：${failUrls}`)
//TODO: 失败重试
page.close()
browser.close();
})()
如果公司不希望使用node部署服务，可以使用python版puppeteer或者java版puppeteer
实现效果
总结
以上三种方式各有利弊，html2+canvas虽然使用简单方便但性能较差，用户体验较差，需要慢慢调整，最难受的是生成的是图片，打开缓慢，有卡顿，并且不能复制文字，服务端使用puppeteer其实是目前来看较为妥当的方案，但是需要后端服务支持。
以上就是基于Vue实现HTML转PDF并导出的详细内容，更多关于Vue HTML转PDF的资料请关注我们其它相关文章！
相关推荐
-
vue导出html、word和pdf的实现代码
导出的页面组件如下: <template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div> </template> 1.导出html 方法: 1)获取要导出的组件页面的css把它设置成js变量一文本并通过export导出 2)获取要导出组件页面的html的dom标签代码,通过thi
-
vue将html页面生成高清晰pdf文件的方法
目录 效果图如下 流文件转成file 总结 需要借助html2canvas和jspdf这两个插件 首先是将页面用html2canvas生成base64的图片,再用jspdf将图片插入到pdf 效果图如下 createImage(){//生成图片->pdf let _this = this; //----此处是解决页面带滚动条的时候截图不全问题 window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body
-
vue使用html2canvas和jspdf将html转成pdf
目录 A4尺寸 安装插件html2canvas和jspdf 在项目中引入 遇到的问题 多行省略号 图片跨域Tainedcanvasesmaynotbeexported base64DataURLscheme支持的类型: 总结 A4尺寸 A4纸的尺寸是210mm×297mm. 分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842(推荐用这个大小比例). 分辨率是150像素/英寸时,A4纸的尺寸的图像的像素是1240×1754. 分辨率是300像素/英寸时,A4纸的尺寸的图像的像素是2
-
Vue网页html转换PDF（最低兼容ie10）的思路详解
HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件 具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式 所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这
-
基于Vue实现HTML转PDF并导出
目录 前言 方案一 问题 解决方案 方案二 使用 问题及解决方案 方案三(推荐) 总结 前言 近期公司提出了一个新需求,希望前端能够根据UI设计绘制运动报告界面,完成数据展示,包括图标展示,并且能够将HTML页面转为PDF并实现下载.基于公司需求,查询了很多资料,最后选定了三种技术方案,并完成Demo,当然三种方案都有优缺点,所以还需要老大根据效果选定最终实现方案. 方案一 window.print浏览器打印是一个非常成熟的东西,直接调用window.print或者document.execCo
-
vue实现word，pdf文件的导出功能
vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `arraybuffer` //一定要写 }) .then(res => { if(res.status == 200){ let blob = new Blob([res.data], { type: `application/
-
基于Vue实现Excel解析与导出功能详解
目录 前言 基本介绍 代码实现 基本结构 上传解析 Excel的导出 基本结构 导出Excel 总结 前言 最近在整理日常开发中长涉及到的业务需求,正好想到了excel的解析与上传方面的事情,在开发中还是比较常见的,趁着周末做一下整理学习吧 基本介绍 主要基于Vue+element实现文件的解析与导出,用的的插件是 xlsx,里面的具体方法,感兴趣的去研究一下,基本的样式,配置就不赘述了,也比较简单,我们直接上主食 代码实现 基本结构 用户点击文件上传,将excel的表格已json的格式显示在页
-
基于vue中css预加载使用sass的配置方式详解
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"
-
基于vue和react的spa进行按需加载的实现方法
基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按
-
基于Vue实现自定义组件的方式引入图标
前言 在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标. 搭建环境 这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用. 安装: npm install --save-dev svg-sprite-loader 配置vue.config.js 在安装svg-sprite-loader后,新建vue.co
-
基于Vue结合ElementUI的换肤解决方案
目录 写在前面 方案一.使用全局的样式覆盖(前端通用) 方案二.自定义自己的Element-ui配色 方案三.快速改变网站颜色 方案四.实时更换主色调 写在前面 换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考. 本文将介绍几种基于Vue.Element-UI的换肤实现方案,力争通俗易懂,易上手,希望大家喜欢~ 方案一.使用全局的样式覆盖(前端通用) 这个应该是最常见,也是大家最容易想到的,也是最容易实现的一种方案. 我们单独写一份样式表(css 文
-
Vue自定义名称下载PDF的方法
目录 vue3.0带来了什么 1.性能的提升 打包大小减少41%初次渲染快55%,更新渲染块133%内存减少54%........ 2.源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Sharking...... 3.拥抱TypeScript vue3.0更好的支持TypeScript 4.新的特性 1.运行Vue指令,安装相对应插件.(在指定的Vue文件下运行) npm install downloadjs 2.其次在项目中引入安装相对应的插
-
基于vue实现分页/翻页组件paginator示例
序言 项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教 当页数小于999(包括999)页 页数大于999页 首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数 监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数 父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=
-
基于Vue如何封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se