vue 中使用print.js导出pdf操作


Posted in Javascript onNovember 13, 2020

1.print.js

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
 if (!(this instanceof Print)) return new Print(dom, options);

 this.options = this.extend({
 'noPrint': '.no-print'
 }, options);

 if ((typeof dom) === "string") {
 this.dom = document.querySelector(dom);
 } else {
 this.isDOM(dom)
 this.dom = this.isDOM(dom) ? dom : dom.$el;
 }

 this.init();
};
Print.prototype = {
 init: function () {
 var content = this.getStyle() + this.getHtml();
 this.writeIframe(content);
 },
 extend: function (obj, obj2) {
 for (var k in obj2) {
  obj[k] = obj2[k];
 }
 return obj;
 },

 getStyle: function () {
 var str = "",
  styles = document.querySelectorAll('style,link');
 for (var i = 0; i < styles.length; i++) {
  str += styles[i].outerHTML;
 }
 str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
 str += "<style>html,body,div,#preview-main,.report{width:100%!important;height: auto!important;font-size:14px}</style>";

 return str;
 },

 getHtml: function () {
 var inputs = document.querySelectorAll('input');
 var textareas = document.querySelectorAll('textarea');
 var selects = document.querySelectorAll('select');
 var canvass = document.querySelectorAll('canvas');

 for (var k = 0; k < inputs.length; k++) {
  if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
  if (inputs[k].checked == true) {
   inputs[k].setAttribute('checked', "checked")
  } else {
   inputs[k].removeAttribute('checked')
  }
  } else if (inputs[k].type == "text") {
  inputs[k].setAttribute('value', inputs[k].value)
  } else {
  inputs[k].setAttribute('value', inputs[k].value)
  }
 }

 for (var k2 = 0; k2 < textareas.length; k2++) {
  if (textareas[k2].type == 'textarea') {
  textareas[k2].innerHTML = textareas[k2].value
  }
 }

 for (var k3 = 0; k3 < selects.length; k3++) {
  if (selects[k3].type == 'select-one') {
  var child = selects[k3].children;
  for (var i in child) {
   if (child[i].tagName == 'OPTION') {
   if (child[i].selected == true) {
    child[i].setAttribute('selected', "selected")
   } else {
    child[i].removeAttribute('selected')
   }
   }
  }
  }
 }

 //canvass echars图表转为图片
 for (var k4 = 0; k4 < canvass.length; k4++) {
  var imageURL = canvass[k4].toDataURL("image/png");
  var img = document.createElement("img");
  img.src = imageURL;
  img.setAttribute('style', 'max-width: 100%;');
  img.className = 'isNeedRemove'
  // canvass[k4].style.display = 'none'
  // canvass[k4].parentNode.style.width = '100%'
  // canvass[k4].parentNode.style.textAlign = 'center'
  canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
 }

 return this.dom.outerHTML;
 },

 writeIframe: function (content) {
 var w, doc, iframe = document.createElement('iframe'),
  f = document.body.appendChild(iframe);
 iframe.id = "myIframe";
 //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
 iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
 w = f.contentWindow || f.contentDocument;
 doc = f.contentDocument || f.contentWindow.document;
 doc.open();
 doc.write(content);
 doc.close();
 
 // 避免重复打印echarts
 var removes = document.querySelectorAll('.isNeedRemove');
 for (var k = 0; k < removes.length; k++) {
  removes[k].parentNode.removeChild(removes[k]);
 }

 var _this = this
 iframe.onload = function(){
  _this.toPrint(w);
  setTimeout(function () {
  document.body.removeChild(iframe)
  }, 100)
 }
 },

 toPrint: function (frameWindow) {
 try {
  setTimeout(function () {
  frameWindow.focus();
  try {
   if (!frameWindow.document.execCommand('print', false, null)) {
   frameWindow.print();
   }
  } catch (e) {
   frameWindow.print();
  }
  frameWindow.close();
  }, 10);
 } catch (err) {
  console.log('err', err);
 }
 },
 isDOM: (typeof HTMLElement === 'object') ?
 function (obj) {
  return obj instanceof HTMLElement;
 } :
 function (obj) {
  return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
 }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
 // 4. 添加实例方法
 Vue.prototype.$print = Print
}
export default MyPlugin

自己页面的样式添加

str += "<style>html,body,div,#preview-main,.report{width:100%!important;height: auto!important;font-size:14px}</style>";

解决echarts图表多点击一次 就会多一张bug

img.className = 'isNeedRemove'
canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
var removes = document.querySelectorAll('.isNeedRemove');

2.用法

//调用系统打印机
print () {
 this.$print(this.$refs.print) // 使用
},

题外话

1.在自己需要的页面引用打印页面 这边我打印页面时preview.vue页面

<!-- 预览 -->
<Modal v-model="previewModal" fullscreen :mask-closable="false" :closable="false">
 <preview ref="print" :previewEditOldForm="previewEditForm"></preview>
 <div slot="footer" class="btn">
  <Button type="text" @click="closePreview">关闭</Button>
  <Button type="primary" @click="print">打印</Button>
 </div>
</Modal>
import Preview from '../operation_report/Preview'
export default {
 components: {
   Preview
 }
}

获取别的页面的表单内容 初始化

export default {
 data() {
 return{
 previewEditForm: {},
 }
 }
}
// 父组件向子组件传值
 on: {
  click: () => {
   // 父组件向子组件传值
   this.previewEditForm = params.row;
   setTimeout(() => {
    this.$refs.print.queryById();
    this.$refs.print.eventOverviews();
    this.previewModal=true;
   }, 2000)
  }
 }

隐藏打印页面不需要的按钮

<style scoped>
 @media print {
  .btn{
   display: none;
  }
 }
</style>

4.打印内容有echarts时 内容不自适应 调整width

width: 210mm;

最终如下

vue 中使用print.js导出pdf操作

补充知识:使用vue-cli脚手架 与 axios 请求数据 配置代理进行跨域访问数据问题

首先利用脚手架vue-cli 把项目搭建好 然后在 利用控制台 在项目中安装http-proxy-middleware中间件作为代理

控制台安装中间代理命令 如下:

npm install -S http-proxy-middleware

然后按照下图 一步步配置

配置结束 是不是 还是不行?

在这里 要关闭下项目 重新在控制台 npm run dev 重启项

目 就大功告成了

一点心得 体会 写得不好 还请大家多多包涵

vue 中使用print.js导出pdf操作

vue 中使用print.js导出pdf操作

vue 中使用print.js导出pdf操作

vue 中使用print.js导出pdf操作

以上这篇vue 中使用print.js导出pdf操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
javascript操作ul中li的方法
May 14 Javascript
javascript实现获取服务器时间
May 19 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 #Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
You might like
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python unittest单元测试框架总结
2018/09/08 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python内置加密模块用法解析
2019/11/25 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
进程的查看和调度分别使用什么命令
2013/12/14 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
干部考察材料范文
2014/12/24 职场文书
任命书标准格式
2015/03/02 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
消费者理赔投诉书
2015/07/02 职场文书
Python读写yaml文件
2022/03/20 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL