element 使用printJS调用打印功能

本文主要是介绍element 使用printJS调用打印功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.安装依赖

npm install print-js --save

2.在main.js中全局引用

import printJS from 'print-js';

3.在页面中使用

          <el-button type="success" plain icon="Printer" :disabled="single" @click="handlePrint">打印</el-button><div style="white-space:pre-wrap" id="fileId" class="hidden-on-screen"><table border="1" style="border-collapse: collapse;font-size: 13px;width: 100%;"><tbody><tr><th>设备分类</th><th>设备类型</th><th>品牌</th><th>型号</th></tr><tr v-for="(item, index) in resLoanItemList" :key="index" style="text-align: center;"><td>{{ item.deviceClassName }}</td><td>{{ item.deviceTypeName }}</td><td>{{ item.brand }}</td><td>{{ item.model }}</td></tr></tbody></table></div>
<script setup>function handlePrint() {
// 获取选中的idconst _id = ids.value
// 调用接口getloanDetail(_id).then(res => {resLoanItemList.value = res.data.resLoanItemListnextTick(() => {printJS({printable: 'fileId', // 确保页面上有一个 ID 为 fileId 的元素  type: 'html',scanStyles: false, // 如果不需要扫描并包含页面的样式，可以设置为 false  style: `  table tr td, th {  font-size: 10px;  border-collapse: collapse;  padding: 5px 0;  text-align: center;  border: 1px #000 solid;  }  table {  width: 100% !important;  border-collapse: collapse;  }  @page { margin: 5mm 17mm; }  `});})}).catch(error => {console.error('Error fetching loan detail:', error);});}
</script>

这篇关于element 使用printJS调用打印功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---