下载vue3-print-nb打印插件："vue3-print-nb": "^0.1.4",
main.ts中使用
import print from 'vue3-print-nb';
app.use(print);
这个标签里面放打印的内容
<div id="printReturn" style="display:inline-block;"></div>
可以放vben-admin的表格，
<div id="printReturn" style="display:inline-block;">
<div v-if="!codeshow" style="display: flex;flex-direction: column;align-items: center;">
<div class="title">标题</div>
<div class="sub-title">{{ 'Requirement Date:' + CreatedDate }}</div>
</div>
<div v-if="!codeshow" style="display: flex;align-items: center;justify-content: space-between;">
<div class="left">
<p>{{ 'Print Time:' + ' ' + PrintTime }}</p>
<p>{{ 'Plant:' + ' ' + Plant }}</p>
<p>{{ 'S/L:' + ' ' + LGORT }}</p>
<!-- <p>{{ 'Recepient:' + ' ' + Recepient }}</p> -->
</div>
<div class="right">
<div class="text">生产主任</div>
<div class="blank"></div>
<div class="text">领料员</div>
<div class="blank"></div>
<div class="text">库管员</div>
<div class="blank"></div>
<div class="text">仓库主管</div>
<div class="blank"></div>
</div>
</div>
<!-- 表格 -->
<div style="display: flex;justify-content: center;">
<div>
<BasicTable @register="registerTableDetail">
</BasicTable>
</div>
</div>
</div>
打印按钮：
<a-button v-if="isHave" type="primary" @click="clickPrint" v-print="printObj" danger>打印</a-button>
打印的配置如下：
let printObj = reactive({
id: 'printReturn', //这里的id就是上面我们的打印区域id，实现指哪打哪
popTitle: '', // 打印配置页上方的标题
extraHead:
'<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printId { width: 100%; }', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
preview: false, // 是否启动预览模式，默认是false
previewTitle: '预览的标题', // 打印预览的标题
previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
previewBeforeOpenCallback() {
console.log('正在加载预览窗口！')
}, // 预览窗口打开之前的callback
previewOpenCallback() {
console.log('已经加载完预览窗口，预览打开了！');
}, // 预览窗口打开时的callback
beforeOpenCallback() {
console.log('开始打印之前！');
codeshow.value = true;
}, // 开始打印之前的callback
openCallback() {
console.log('执行打印了！');
}, // 调用打印时的callback
closeCallback() {
console.log('关闭了打印工具！');
}, // 关闭打印的callback(无法区分确认or取消)
clickMounted() {
console.log('点击v-print绑定的按钮了！');
},
});
此时做打印可能是不能自动根据内容分页的，怎么打只有一页， 我们要下一个新的包："print-js": "^1.6.0",
并且还要修改print-js里面的源码： print-js下面的src下面的js下面的function.js 31行加入如下代码 elementStyle += "html,body,div{height: auto!important;}";
这下面的样式可以把要打印的表格边距取消，多打印几行 但是要先修改项目中的BasicTable.vue租件的tableLayout从fixed修改为auto, 好像也不用这样全局修改，在注册表格的时候可以传这个属性。
<style scoped>
::v-deep .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
padding: 1px !important;
height: 0;
margin: 0;
overflow-wrap: break-word;
font-size: ;
}
::v-deep .ant-table-tbody .ant-table-row td {
padding:0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
font-size: 12px;
}
</style>
还有一个点是vben-admin的这个表格 的数据如果是动态api获取的，表格宽度可能会自动适应横向纵向。如果是静态的是使用:dataSource=的话宽度不会自适应。
