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 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
js实现随机圆与矩形功能
Oct 29 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP 中常量的知识整理
2017/04/14 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
dataframe设置两个条件取值的实例
2018/04/12 Python
python pandas库的安装和创建
2019/01/10 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python怎么判断模块安装完成
2020/06/19 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
成人大专自我鉴定范文
2013/10/19 职场文书
顶岗实习计划书
2014/01/10 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
租房协议书怎么写
2014/04/10 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
交通事故起诉书
2015/05/19 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang