前端vue项目如何基于PrintJS实现可调边距无空白页直接打印功能

背景

之前已利用PrintJS实现PDF直接打印功能，可是客户提出要求打印时可以调整边距，经测试在浏览器上执行打印PDF文件功能时，不能调整边距，而选择打印图片格式文件时可以调整边距。所以可以尝试把文件格式改为图片格式来直接打印。

1. 预实现方法

1. 安装print-js npm install print-js --save
2. 引入到项目中使用的地方 import printJS from 'print-js'
3. 使用：response为服务端返回的数据流，图片格式

   let data = new Blob([response]);
   let file = new Blob([data]);
   let objectUrl = window.URL.createObjectURL(file);
   printJS({
      printable: objectUrl,
      type: "image",
   });

2. 遇到的问题

打印图片时首页和尾页会是空白页，即多出来两页空白页

3. 最终解决方案

   let data = new Blob([response]);
   let file = new Blob([data]);
   let objectUrl = window.URL.createObjectURL(file);
   printJS({
      printable: objectUrl,
      type: "image",
      style:
      "@media print{ @page { size: auto; margin: 0; mso-header: none; mso-footer: none; } body{margin:0 5px}}",
   });

说明：
@page {size: A4;margin: 0; mso-header：none: none; ；mso-footer·: none;} 
size： 打印纸大小；
margin：打印区域外边距；
mso-header：设置页头；mso-footer：设置页脚
body{margin:0 5px} 图片外边距，这里设置上下均为0 可以去掉空白的首页和尾页