页面打印

使用print-js库实现页面打印
[https://www.npmjs.com/package/print-js](https://www.npmjs.com/package/print-js)

安装

npm install print-js --save

可选的打印格式有 pdf/html/json/img等,这以html为案例

<template>
  <div ref="printRef">
    <button type="button" @click="onPrint">打印</button>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import printJS from 'print-js';
  const printRef = ref(null);
  const onPrint = () => {
    printJS({
      printable: printRef.value,
      type: 'html',
      css: [
        '//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css',
        '//unpkg.com/element-plus/dist/index.css',
      ],
      scanStyles: false,// 设置扫描样式设置为false时: 库将不会处理应用于正在打印的html的样式。使用css参数时很有用。
      style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
    });
  };
</script>
<style scoped></style>