关于js打印图片,第一页空白问题

前提

我使用原生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}}`,
  });
};

猜你喜欢

转载自blog.csdn.net/xiaoxiongxia/article/details/132056296