vuepdf转换html,Vue网页html转换PDF(最低兼容ie10)的思路详解
Vue网页html转换PDF(最低兼容ie10)的思路详解
发布时间:2020-10-16 13:05:09
来源:脚本之家
阅读:95
作者:冷藏封
HTML转PDF:
1.页面底层实现——Vue:最低兼容ie10
2.实现思路:
1> 使用html2canvas.js将网页转换为图片
2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件
具体实现:
要这样实现首先要引入两个插件:
html2canvas.js
jsPdf.debug.js
注:
因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式
所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这样就不会修改页面原有样式了
如果大家有更好的方法,欢迎提议
下面上代码:
import co from 'co'
import html2Canvas from '../html2canvas'
import JsPDF from '../jsPdf.debug'
export default {
title: '用户信息',
data () {
return {}
},
methods: {
// 核心代码
printOut () {
// 获取需要打印的区域,以div为单位,此处使用的是vue的选择器
let pdfDom = document.querySelector('#pdf-wrap')
// 因为在ie10下,会出现input样式丢失的情况,所以在此处清楚input的标签的边框
let arrnode = pdfDom.querySelectorAll('input')
for (var i = 0; i < arrnode.length; i++) {
arrnode[i].style.border = 'hidden'
}
// 设置背景色
pdfDom.style.background = '#FFFFFF'
let _this = this
html2Canvas(pdfDom, {
allowTaint: true, taintTest: false,
onrendered: function (canvas) {
// 开始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
// 此处图片格式可以是PNG,也可是JPEG,注意:需要考虑Browser支持的图片格式
let pageData = canvas.toDataURL('image/PNG', 1)
pdfDom.style.display = 'none'
// 开始将图片转换为PDF
// 设置纸张大小,方向
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'PNG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'PNG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
// 保存PDF
PDF.save(_this.userInfo.card_id + '-' + _this.userInfo.user_name + '.pdf')
}
})
html2Canvas()
}
},
ready () {
}
}
总结
以上所述是小编给大家介绍的Vue网页html转换PDF(最低兼容ie10)的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
vuepdf转换html,Vue网页html转换PDF(最低兼容ie10)的思路详解相关推荐
- 微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器(思路详解)...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...
- vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听 需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层 翻阅了一些博客,发现好多都提到了mous ...
- Vue进阶(幺肆捌):Vuex 辅助函数详解
文章目录 一.前言 二.辅助函数 三.如何使用辅助函数 四.辅助函数如何去映射 vuex.store 中的属性 4.1 mapState: 把 state 属性映射到 computed 身上 4.2 ...
- Vue进阶(四十三):Vuex之Mutations详解
文章目录 一.前言 二.如何使用 mutations ? 三.源码分析 四.拓展阅读 一.前言 通俗理解mutations,里面装着一些改变数据方法的集合,这是Vuex设计很重要的一点,就是把处理数据 ...
- vue遇到ie兼容问题如何处理_详解vue 兼容IE报错解决方案
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法(如箭头函数),而不转换新的 API ,比如 Iterator.Generator.Set. ...
- vue实现单选做题根据对错标色,作对跳转下一题,实现思路详解
vue实现单选做题效果详解 最近在做一个答题项目,废了好多时间,经过折腾和在大佬的指导下,终于清晰的了解逻辑,如果你也遇到此类问题,不妨先看看我的思路,看完点个赞,那是继续跟新的动力 此案例是使用sw ...
- java vue 服务端渲染_vue服务端渲染缓存应用详解
服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...
- html实现pdf导出excel表格,一篇文章详解:Vue框架下轻松实现Excel、PDF导出
项目需求:开发一套基于Vue框架的工程档案管理系统,用于工程项目资料的填写.编辑和归档,经调研需支持如下功能: Excel报表的导入.导出 PDF文件的导出 打印表格 经过技术选型,项目组一致决定通过 ...
- Vue.js中 watch(深度监听-deep)原理以及详解
handler方法和immediate属性 这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎 ...
最新文章
- Android启动页黑屏及解决方案
- 代码解析深度学习系统编程模型:TensorFlow vs. CNTK
- 05-RARP: 逆地址解析协议
- 【Groovy】Groovy 方法调用 ( Java 类成员及 setter 和 getter 方法设置 | Groovy 类自动生成成员的 getter 和 setter 方法 )
- 8086汇编复习1 - 并使用emu8086模拟器查看效果
- 实现html锚点的两种方式
- C++学习笔记系列之继承多态
- 超图Cesium二三维切换
- 什么是数字孪生?终于有人讲明白了
- 博文视点云原生书单丨释放云原生技术红利
- linux jmeter 内存,怎么在Linux下改变JMeter内存
- nginx部署前端代码
- 无火花工具的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- 2. VBA Excel宏
- 别把项目成功当目标!——项目经理的误区(1)(转)
- 前端小白-HTML简介
- Darknet - How to improve object detection? - 如何提升物体检测?
- Froyo 自动编译方法
- 国内最全的通信运营商5G无线频率分布(含移动电信联通广电铁路)
- LatexVScode 报错I found no bibdata command//command//citation—while reading file*.aux