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调试说明
Jun 07 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
简单谈谈json跨域
Mar 13 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
vue 子组件和父组件传值的示例
Sep 11 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 函数执行效率的小比较
2010/10/17 PHP
PHP图片加水印实现方法
2016/05/06 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
koa-router源码学习小结
2018/09/07 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
详解vue引入子组件方法
2019/02/12 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
js实现蒙版效果
2020/01/11 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
详解python中的文件与目录操作
2017/07/11 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python输入错误后删除的方法
2019/10/12 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
优秀员工自荐书
2013/12/19 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
教师节座谈会主持词
2015/07/03 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫