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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Python字典操作简明总结
2015/04/13 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解爬虫被封的问题
2019/04/23 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
银行介绍信范文
2014/01/10 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
爱国主义主题班会
2015/08/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript