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 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python 使用with上下文实现计时功能
2018/03/09 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
PHP面试题附答案
2015/11/28 面试题
小溪流的歌教学反思
2014/02/13 职场文书
学校周年庆活动方案
2014/08/22 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
负责培养人意见
2015/06/05 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
安全教育培训心得体会
2016/01/15 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL