Vue将页面导出为图片或者PDF


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了Vue导出页面为PDF格式的具体代码,供大家参考,具体内容如下

导出为图片

1.将页面html转换成图片

npm install html2canvas --save

2.在需要导出的页面引入

import html2canvas from 'html2canvas';

在 methods 中添加方法

dataURLToBlob(dataurl) {//ie 图片转格式
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
     u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime})
    },
  downloadResult(name) {
    let canvasID = document.body
    let a = document.createElement('a');
    html2canvas(canvasID).then(canvas => {
     let dom = document.body.appendChild(canvas);
     dom.style.display = "none";
     a.style.display = "none";
     document.body.removeChild(dom);
     let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
     a.setAttribute("href", URL.createObjectURL(blob));
     a.setAttribute("download", name + ".png")
     document.body.appendChild(a);
     a.click();
     URL.revokeObjectURL(blob);
     document.body.removeChild(a);
    });
    },
   printOut(name) {
   // 个人观察只是截取可见范围以及以下的区域,所以先将滚动条置顶
    $(window).scrollTop(0); // jQuery 的方法
    document.body.scrollTop = 0; // IE的
    document.documentElement.scrollTop = 0; // 其他
    this.downloadResult(name)
  },

导出为PDF

1.将页面html转换成图片

npm install html2canvas --save

2.将图片生成pdf

npm install jspdf --save

3.在需要导出的页面引入

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'

在 methods 中添加方法

printOut(name) {
  let shareContent = document.body,//需要截图的包裹的(原生的)DOM 对象
   width = shareContent.clientWidth, //获取dom 宽度
   height = shareContent.clientHeight, //获取dom 高度
   canvas = document.createElement("canvas"), //创建一个canvas节点
   scale = 2; //定义任意放大倍数 支持小数
  canvas.width = width * scale; //定义canvas 宽度 * 缩放
  canvas.height = height * scale; //定义canvas高度 *缩放
  canvas.style.width = shareContent.clientWidth * scale + "px";
  canvas.style.height = shareContent.clientHeight * scale + "px";
  canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
  let opts = {
   scale: scale, // 添加的scale 参数
   canvas: canvas, //自定义 canvas
   logging: false, //日志开关,便于查看html2canvas的内部执行流程
   width: width, //dom 原始宽度
   height: height,
   useCORS: true, // 【重要】开启跨域配置
  };

  html2Canvas(shareContent, opts).then(() => {
   var contentWidth = canvas.width;
   var contentHeight = canvas.height;
   //一页pdf显示html页面生成的canvas高度;
   var pageHeight = (contentWidth / 592.28) * 841.89;
   //未生成pdf的html页面高度
   var leftHeight = contentHeight;
   //页面偏移
   var position = 0;
   //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
   var imgWidth = 595.28;
   var imgHeight = (592.28 / contentWidth) * contentHeight;
   var pageData = canvas.toDataURL("image/jpeg", 1.0);
   var 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(name + ".pdf"); // 这里是导出的文件名
  });
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
javascript 模拟点击广告
Jan 02 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
发布订阅模式在vue中的实际运用实例详解
Jun 09 #Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 #Javascript
解决vue单页面应用中动态修改title问题
Jun 09 #Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 #Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 #Javascript
You might like
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python定时器实例代码
2017/11/01 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
学校消防演习方案
2014/02/19 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
先进单位申报材料
2014/12/25 职场文书
会计工作能力自我评价
2015/03/05 职场文书
道德与公民自我评价
2015/03/09 职场文书
大学团日活动总结书
2015/05/11 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书