使用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>