Vue网页html转换PDF(最低兼容ie10)的思路详解


Posted in Javascript onAugust 24, 2017

HTML转PDF:

1.页面底层实现——Vue:最低兼容ie10

2.实现思路:

1> 使用html2canvas.js将网页转换为图片

2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件

具体实现:

要这样实现首先要引入两个插件:

html2canvas.js

jsPdf.debug.js

注:

因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式

所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这样就不会修改页面原有样式了

如果大家有更好的方法,欢迎提议

下面上代码:

<script type="text/ecmascript-6">
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 () {
 }
}
</script>

总结

以上所述是小编给大家介绍的Vue网页html转换PDF(最低兼容ie10)的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
浅析vue component 组件使用
Mar 06 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 #Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 #Javascript
angular2路由切换改变页面title的示例代码
Aug 23 #Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 #Javascript
bootstrap fileinput实现文件上传功能
Aug 23 #Javascript
jQuery Position方法使用和兼容性
Aug 23 #jQuery
详解EasyUi控件中的Datagrid
Aug 23 #Javascript
You might like
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
JavaScript实现简单计算器功能
2019/12/19 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 将md5转为16字节的方法
2018/05/29 Python
Python常用的json标准库
2019/02/19 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python笔记之代理模式
2019/11/20 Python
python numpy数组中的复制知识解析
2020/02/03 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
实习自荐信
2013/10/13 职场文书
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
六个一活动实施方案
2014/03/21 职场文书
最新离婚协议书范本
2014/08/19 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
北京英语导游词
2015/02/12 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏