前提
我使用原生js进行一个图片打印,原本是img标签上面绑定id后预览不生效,然后就在img上面套了一层div,发现是可以了,但发现第一页的一个内容是为空的,但是如果正常打印div里面的文字的话是没问题的
原生js打印如下代码所示
print(){
const el = document.getElementById("box")
var newWindow=window.open("","");
var docStr = el.innerHTML;
newWindow.document.write(docStr);
newWindow.document.close();
newWindow.print();
newWindow.close();
},
解决
后面使用了print-js进行一个功能的应该实现
安装依赖
npm install print-js --save
如果安装报错,请留意node版本这块的问题
printjs使用
//这个引用我也很疑惑,因为都没用到
import print from "print-js";
//调用打印机
const onPrinter = () => {
let businessImage = document.getElementById("businessImage");
//printable 是demo,type 是格式,style是打印样式
//因为我是网络图片就不需要用html2canvas来截图了
//你们可以通过html2canvas 拿来进行应该dome的一个截图,拿到url然后放进去
printJS({
printable:"图片地址也是url",
type: "image",
style: `@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}`,
});
};