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 相关文章推荐
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
Vue自定义指令详解
Jul 28 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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 $_SERVER当前完整url的写法
2009/11/12 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php MessagePack介绍
2013/10/06 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
Underscore源码分析
2015/12/30 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
js实现筛选功能
2020/11/24 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
海洋科学专业求职信
2014/08/10 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android