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 相关文章推荐
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
yii数据库的查询方法
2015/12/28 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python strip()函数 介绍
2013/05/24 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python梯度下降法的简单示例
2018/08/31 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python安装whl文件过程图解
2020/02/18 Python
python实现邮件循环自动发件功能
2020/09/11 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
中专自我鉴定范文
2013/10/16 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
军训感想500字
2014/02/20 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
学校欢迎标语
2014/06/18 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python