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 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
详解Django中间件执行顺序
2018/07/16 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python map及filter函数使用方法解析
2020/08/06 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
检查接待方案
2014/02/27 职场文书
学生保证书范文
2014/04/28 职场文书
个人工作表现评价材料
2014/09/21 职场文书
个人年终总结开头
2015/03/06 职场文书
网络营销实训总结
2015/08/03 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python