JS之打印导出PDF

我们可以直接调用浏览器的打印功能来实现。

1.直接打印

直接调用浏览器的打印功能，打印整个页面

function preview () {
     window.print();
}

2.打印指定区域

通过开始标记、结束标记来打印，打印局部页面

<!--startprint-->
    <div>
        打印的内容
    </div>
 <!--endprint-->

打印函数

const preview = () => {
  let bdhtml = window.document.body.innerHTML;
  let sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
  let eprnstr = "<!--endprint-->"; //结束打印标识字符串
  let prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
  prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
  window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给body.innerHTML
  window.print(); //调用浏览器的打印功能打印指定区域
  window.document.body.innerHTML = bdhtml; //重新给页面内容赋值；
  return false;
};

3.去掉打印时的页眉和页脚

@page {
  size: auto; /* auto是初始值 */
  margin: 0mm; /* 这会影响打印机设置中的边距 */
}

4.由于设置区域进行打印会导致原来的Vue相关功能（包括Vue的点击事件）失效，无法使用router.back返回上一级页面和进行再次打印。

<van-sticky>
    <van-nav-bar
        title="打印流程"
        left-text="返回"
        left-arrow
        right-text="打印"
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
    </van-nav-bar>
</van-sticky>

我采用以下方式返回上一级页面和进行再次打印。

首先，点击打印按钮打印后重新加载页面，从而可以再次打印。

const onClickRight = () => {
  preview();
  location.reload();
};

其次，使用router.replace跳转回上一页面。

const onClickLeft = () => {
  router.replace("myDoneDetail");
};

最后，上一页面使用router.replace进行跳转。

router.replace({
  path: "PrintProcess",
})

即可。