xyl66 / vueplugs_printjs

vue打印插件

vuePlugs_printjs

vue打印插件 使用方法

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print">
	打印内容
	<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用

注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空 指定不打印区域 方法一. 添加no-print样式类

<div class="no-print">不要打印我</div>

方法二. 自定义类名

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用

vueplugs_printjs's Issues

HTML页面如何引入该插件？

如题，在html页面import 然后vue.use会报错

无法打印组件里的内容

vue 项目中引入的有chart.js组件，打印的时候不显示。
打印的时候13212显示 但是下方的line-chart组件内容不显示。

13212

浏览器兼容，ie11,ie10无法读取样式

避免踩坑总结：1.调用打印的方法：this.$print(this.$refs.print)
2.js文件有处地方不符合严格模式，ie会报错
代码：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;')
开发环境中浏览器：谷歌，火狐，edge都正常，ie10，ie11无法读取css样式

更改writeIframe方法：

更改writeIframe方法：
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"));
} catch (ex) {
style.styleSheet.cssText = "@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"; //针对IE
}
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;
var head = doc.getElementsByTagName("head")[0];
// head.appendChild(style);
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function () {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},

Originally posted by @quqingfei in #14 (comment)

打印样式丢失是什么原因

更改writeIframe方法：

如何引入外部样式

IE11不兼容

请问这个IE11能兼容吗？

能不能支持打印多份？

点击打印按钮，第一次正常，之后再点击则打印一直是空白

打印其他组件的指定内容，样式丢失

场景：
两个组件 A.vue B.vue
A 有个 按钮执行打印
B 中有需要打印的内容
B 把需要打印的ref 传入 A , 在 A中执行打印 后样式丢失

vue新打开的页面里面存放要打印的内容，然后自动调用打印功能，发现原网页这时候无法点击

打印不全

打印table表格只能打印一半

传入的子节点打印内容、父节点样式也会被应用上

传入的子节点dom打印内容、父节点的样式也会被应用上

能支持设置打印预览默认A5吗？

能支持设置打印预览默认A5吗？

打印的时候表格列会缩短并显示省略号，如何处理让他正常显示

使用ref获取的打包后依然是空白

importOut() {
this.$print(this.$refs.print);
}
使用ref获取的打包后依然是空白，怎么解决？

显示只有一页内容

给循环的元素手动分页

如何给循环出来的div分页呢

用引入本地print.js的方式打印，没有弹出打印界面

用引入本地print.js的方式打印，没有弹出打印界面，每次点击Dom会增加一个iframe

<iframe id="myIframe" style="position:absolute;width:0;height:0;top:-10px;left:-10px;"></iframe>

打印多页也只显示一页内容

vue中使用打印变成空白了

如题

每次点击打印都会加载了一次css导致有时候会出现打印空白

css 兼容打印空白

对文字设置换行属性
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

后打印结果 空白

小票打印一直打下去

想打印小票的，页面一直被打印下去，不知道程序里可以设置页面吗？

设置不打印的内容，自定义类名这个方式无效

就是说打印不了 自定义的 但是添加指定样式no-print可以

如何去掉打印的页眉与页脚

isDOM方法不存在

Error in event handler for "click": "TypeError: this.isDOM is not a function"

found in

--->

at src/pages/form/engineeringEvent/read.vue
at src/App.vue

更改writeIframe方法：

更改writeIframe方法：
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"));
} catch (ex) {
style.styleSheet.cssText = "@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"; //针对IE
}
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;
var head = doc.getElementsByTagName("head")[0];
// head.appendChild(style);
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function () {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},

Originally posted by @quqingfei in #14 (comment)

无法打印指定容器内的全部内容

无法打印指定容器内的全部内容，仍然打印的是当前窗口

点击打印按钮出现两张一模一样的页面，应该是只有一张。

[图片]

有回调函数吗

开发环境打印没问题，实际环境有很大几率出现打印空白

如标题所言，与vue一起使用，会出现空白现象

日期无法打印

input 标签日期插件 输入日期都打印是年/月/日 不是选择的日期

vue项目上线后，点击打印会出现部分样式丢失，点击f5刷新页面之后再点击打印样式正常。是什么原因啊？

vue项目上线后，点击打印会出现部分样式丢失（即使这个样式是内联样式也会丢失），点击f5刷新页面之后再点击打印样式正常。是什么原因啊？

总之就是必须点击刷新之后再点击打印才正常。本地的话没有这个问题。

webpack打包后还是打印不出内容

更改writeIframe方法：

更改writeIframe方法：
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"));
} catch (ex) {
style.styleSheet.cssText = "@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"; //针对IE
}
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;
var head = doc.getElementsByTagName("head")[0];
// head.appendChild(style);
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function () {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},

Originally posted by @quqingfei in #14 (comment)

抄袭代码

更改writeIframe方法：

更改writeIframe方法：
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"));
} catch (ex) {
style.styleSheet.cssText = "@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"; //针对IE
}
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;
var head = doc.getElementsByTagName("head")[0];
// head.appendChild(style);
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function () {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},

Originally posted by @quqingfei in #14 (comment)

This dependency was not found

• @/src/utils/print.js in ./node_modules/babel-loader/lib!./node_modules/vue-loa
  der/lib/selector.js?type=script&index=0!./src/views/deliver/index.vue

样式丢失：非根css选择器的情况下会丢失

问题

一次写scss多层嵌套后发现样式丢失，经过观察，发现dom样式不同。有多层选择器时打印样式丢失，唯一选择器时正常。

情况描述

打印节点

<div class="father">
<div class="print ref="printnode">Here is something to print!</div>
</div>

scss样式
样式丢失的情况：

.father{
.print{
color:red;
}
}

样式正常的情况：

.father{
}
.print{
color:red;
}

总结

目前可以在使用时写根选择器样式解决，希望后续能修复此问题。

chrome 打印 1页数据打印了2页

chrome 打印 1页数据打印了2页

预览页面有点模糊

出现的打印页面有点模糊是咋回事

字体大小丢失，ant vue checkbox，radio等样式无法打印

使用npm方式导入printjs，打印HTML时，字体大小样式不生效。ant vue checkbox及radio组件无法正常显示（选中时的状态）

vue下打印出来是个空白页

如题，还是个大空白页

更改writeIframe方法：

更改writeIframe方法：
writeIframe: function (content) {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"));
} catch (ex) {
style.styleSheet.cssText = "@page{margin:0mm;@top-left{display: none;}@bottom-center{display: none;}}"; //针对IE
}
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;
var head = doc.getElementsByTagName("head")[0];
// head.appendChild(style);
doc.open();
doc.write(content);
doc.close();
var _this = this
iframe.onload = function () {
_this.toPrint(w);
setTimeout(function () {
document.body.removeChild(iframe)
}, 100)
}
},

Originally posted by @quqingfei in #14 (comment)

safari浏览器不能打印

Safari和IE都换不起打印

在Safari和IE浏览器上都换不起打印

使用例子打印的全屏的内容

import Print from '@/plugs/print'
Vue.use(Print) // 注册

打印内容

不要打印我

this.$print(this.$refs.print) // 使用

怎么设置去掉页眉页脚，以及设置打印主体的边距

怎么设置去掉页眉页脚，以及设置打印主体的边距