vue.js - Vue中使用printJS打印时页面出现黑边，如何解决？

Question

vue中使用printJS打印出现黑边,并且变成两页数据

<el-dialog      title="预览"      :visible.sync="previewModelVisible"      append-to-body      destroy-on-close    >      <div style="position: relative">        <el-button          type="primary"          @click="printBox"          style="position: absolute; right: 0; top: -40px"        >          打印        </el-button>      </div>      <div id="box" ref="file"></div>    </el-dialog>printBox() {      setTimeout(function () {        printJS({          printable: "box",          type: "html",          scanStyles: false,          targetStyles: ["*"],          style:            "@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}",        });      }, 500);    },

给样式修改了一下（不知道写的对不对），现在上面的框没了，下面的还在

printBox() {      setTimeout(function () {        printJS({          printable: "box",          type: "html",          scanStyles: false,          targetStyles: ["*"],          style:            " @page{size: auto;margin-top: -20mm};.hidden {display: none;}",        });      }, 500);    },

Answer 1

“黑边” 看起来是打印元素目标元素的 box-shadow 属性导致的。

至于一页数据预览变成两页的话，可能是因为你内容溢出导致的，检查一下目标元素的高度是不是超过了 297mm（边距留白没有计算在内）