vue实现pdf导出解决生成canvas模糊等问题(推荐)


Posted in Javascript onOctober 18, 2018

最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢?

1  、我们要添加两个模块

1 第一个.将页面html转换成图片
2 npm install --save html2canvas
3 第二个.将图片生成pdf
4 npm install jspdf --save

2 、定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ' src /utils/htmlToPdf' )

// 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 export default{
  install (Vue, options) {
   Vue.prototype.getPdf = function () {
    var title = this.htmlTitle
    html2Canvas(document.querySelector('#pdfDom'), {
     allowTaint: 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()
       }
      }
     }
     PDF.save(title + '.pdf')
    }
    )
   }
  }
 }

3 、在 main.js 中使用我们定义的函数文件。

import htmlToPdf from '@/components/utils/htmlToPdf'
 Vue.use(htmlToPdf)

4 、在需要的导出的页面 .. 调用我们的 getPdf 方法即可 .

<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
   //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
 </div>
 <button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>
 export default {
  data () {
    return {
    htmlTitle: '页面导出PDF文件名'
    }
  }
 }

到这里大家会发现功能是可以实现了,但是会有个致命的问题,导出来的pdf打印出来还是比较模糊的,那么,针对这个问题,我们要怎么解决呢?

我们的思路是:将canvas的属性width和height属性放大为2倍,最后将canvas的css样式width和height设置为原来1倍的大小即可,也就是,先将canvas高分辨率输出,再来压缩导出打印,即可,废话不多说,完整代码如下:

// 导出页面为PDF格式
 import html2Canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 export default{
  install (Vue, options) {
   Vue.prototype.getPdf = function (dom,title) {
    var title = title
    var c = document.createElement("canvas")
    var opts = {
     scale: 2, 
     canvas: c, 
     logging: true, 
     width: document.querySelector(dom).width, 
     height: document.querySelector(dom).height 
    };
    c.width = document.querySelector(dom).width * 2
    c.height = document.querySelector(dom).height * 2
    c.getContext("2d").scale(2, 2);
    html2Canvas(document.querySelector(dom), opts).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()
       }
      }
     }
     PDF.save(title + '.pdf')
    }
    )
   }
  }
 }

总结

以上所述是小编给大家介绍的vue实现pdf导出解决生成canvas模糊等问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
js 函数调用模式小结
Dec 26 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
js实现开关灯效果
Mar 30 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 #Javascript
使用JS获取页面上的所有标签
Oct 18 #Javascript
深入理解 Koa 框架中间件原理
Oct 18 #Javascript
JS实现十分钟倒计时代码实例
Oct 18 #Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 #Javascript
JavaScript的词法结构精华篇
Oct 17 #Javascript
Javascript中parseInt的正确使用方式
Oct 17 #Javascript
You might like
由php if 想到的些问题
2008/03/22 PHP
PHP ajax 分页类代码
2008/11/13 PHP
PHP基础学习小结
2011/04/17 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
浅说js变量
2011/05/25 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python nmap实现端口扫描器教程
2020/05/28 Python
QML使用Python的函数过程解析
2019/09/26 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
法律六进活动方案
2014/03/13 职场文书
股东授权委托书
2014/10/15 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年平安创建工作总结
2015/04/29 职场文书