vue中打印表格功能（重点是表格制作）

您所在的位置：网站首页 › 前端实现打印票据的方法 › vue中打印表格功能（重点是表格制作）

vue中打印表格功能（重点是表格制作）

2024-07-16 16:11| 来源: 网络整理| 查看: 265

第一种表格

先上效果图：在这里插入图片描述上图就是打印的效果，但表格的样式没有出来，在vue-cli脚手架里样式是起作用的。这个打印是用的原生javascript的方法实现的，但引用了vue.js和element

代码如下：

vue中打印 #printTest table{ font-family:"宋体"; border-collapse:collapse; width:99.5%; } #printTest table thead th{ height: 40px; font-size: 13px; /* width: 10px; */ text-align: center; border: 1px solid black; } #printTest table tbody tr{ font-size:13px; border: 1px solid black; height: 40px; text-align: center; } #printTest table tbody td{ font-size: 13px; text-align: center; border: 1px solid black; } 打印打印表单客户名称：日期：2019年08月03日日期名字地址爱好数量运动备注 {{item.date}} {{item.name}} {{item.address}} var apps = new Vue({ el:'#apps', data(){ return{ printDialogVisible:false, tableData: [{ id:1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { id:2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { id:3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { id:4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, methods: { handleFinish(){ this.printDialogVisible = true }, yinp(){ var newstr = document.getElementById("printTest").innerHTML;//得到需要打印的元素HTML var oldstr = document.body.innerHTML document.body.innerHTML = newstr; window.print(); document.body.innerHTML = oldstr; }, }, })

第二种表格在这里插入图片描述这个是vue-cli脚手架里用的打印功能。通过npm 安装插件

1，安装 npm install vue-print-nb --save

2，引入安装好以后在main.js文件中引入

import Print from 'vue-print-nb' 　Vue.use(Print); //注册

3，现在就可以使用了

　　　　　　锄禾日当午　　　　　　汗滴禾下土　　　　　　谁知盘中餐　　　　　　粒粒皆辛苦　　　　　　　　打印

现在就把表格代码贴出来：

返回打印 {{daolist.transferInCompanyName}} 设备厂内迁移单调出单位：{{daolist.transferOutCompanyName}} / {{daolist.transferOutFactoryName}} / {{daolist.transferOutDepartmentName}} 调入单位：{{daolist.transferInCompanyName}} / {{daolist.transferInFactoryName}} / {{daolist.transferInDepartmentName}} 编号：{{daolist.formCode}} 固定资产编号设备名称型号规格出厂编号制造厂家数量单位年限固定资产价值（元）备注折旧已用原值净值 {{daolist.fixedAssetCode}} {{daolist.equipName}} {{daolist.equipType}} {{daolist.serialNumber}} {{daolist.manufacturer}} {{daolist.nums}} 台 {{daolist.depreciationPeriod}} {{daolist.usedPeriod}} {{daolist.originalFinancialValue}} {{daolist.netBookValue}} {{daolist.remark}} 调拨原因 {{daolist.reason}} 其他说明 {{daolist.otherDescription}} 经办人签字设备科长签字设备副总签字资产部副部长签字资产部盖章意见：{{operator}} 意见：{{branch}} 意见：{{fuzong}} 意见：{{zichan}} 意见：经办人：{{operatorname}} 经办人：{{branchname}} 经办人：{{fuzongname}} 经办人：{{zichanname}} 经办人：日期：{{operatordate}} 日期：{{branchdate}} 日期：{{fuzongdate}} 日期：{{zichandate}} 日期：

这个是一个弹框里的内容。 css代码：

#printTest2 table{ border-collapse:collapse; } #printTest2 table thead th{ font-size: 20px; padding:10px; } #printTest2 table tbody tr{ height:30px; font-size:14px; } #printTest2 table tbody td span{ margin-right:20px; }

第三种表格的写法在这里插入图片描述这个几种表格的格式是不一样的：

代码：

返回打印 {{srintList.repairCompany}}设备报修单设备名称 {{srintList.equipmentName}} 固定资产编号 {{srintList.fixedAssetCode}} 型号规格 {{srintList.model}} 报修时间 {{srintList.repariDate}} 电路板名称 {{srintList.circuitBoardName}} 电路板型号 {{srintList.circuitBoardModel}} 报修部门 {{srintList.repairDivision}} 要求完成时间 {{srintList.requestDate}} 外部维修(√)内部维修(√) 故障原因及内容：{{srintList.causeReason}} 设备科审核意见：{{fixing}} 签字：{{fixingName}}日期：{{fixingDate}} 厂长审核意见：{{factoryst}} 签字：{{factorystName}}日期：{{factorystDate}} 事业部分管副总意见：{{enterprise}} 签字：{{enterpriseName}}日期：{{enterpriseDate}} 资产部意见：{{propertyst}} 签字：{{propertystName}}日期：{{propertystDate}}

css代码：

#printTest1 table{ border-collapse:collapse; } #printTest1 table thead th{ font-size: 20px; padding:10px; } #printTest1 table tbody tr{ height:30px; font-size:14px; } #printTest1 table tbody td{ width:25%; } #printTest1 table tbody td span{ margin-right:20px; }

第四种和第一种是一样的只不过是放在了vue-cli脚手架里在这里插入图片描述代码：

打印出库单客户名称：出库日期：2019年08月03日材料编号材料名称单位订单号数量箱数备注 {{item.date}} {{item.name}} {{item.address}}

css代码：

#printTest table{ font-family:"宋体"; border-collapse:collapse; width:99.5%; } #printTest table thead th{ height: 40px; font-size: 13px; /* width: 10px; */ text-align: center; border: 1px solid black; } #printTest table tbody tr{ font-size:13px; border: 1px solid black; height: 40px; text-align: center; } #printTest table tbody td{ font-size: 13px; text-align: center; border: 1px solid black; }

【本文地址】

vue中打印表格功能（重点是表格制作）

vue中打印表格功能（重点是表格制作）

今日新闻

推荐新闻