最近做了個庫存管理系統，產品經理要求前端頁面展示表格內容，并且打印。效果如下：

1.首先是vue文件（無需安裝任何依賴，復制粘貼可用）

<template><div class="my-multi-table"><div class="button_group"><el-button type="primary" @click="editSend">編輯</el-button><el-button type="primary" @click="printSendTable">打印運輸交接單</el-button><el-button type="primary" @click="previewSendTable">查看出庫單</el-button></div><div class="print" ref="print"><div style="margin:0 auto;"><divstyle="color: #666666; text-align:center;margin-top:30px; margin-bottom: 10px; display: flex; justify-content: space-between;"><div>XXX有限公司</div><div>2-SMP-MC-01-015</div></div><h3 style="text-align:center;margin-top:30px; margin-bottom: 10px">冷鏈發貨運輸交接單</h3><div style="text-align:right; margin-bottom: 10px">編號：_________________</div><tablestyle="width: 100%"class="table table-striped table-bordered"align="center"valign="center"><tr><td class="column" colspan="8">基本信息（發貨人填寫）</td></tr><tr><td class="column" colspan="2">供貨單位/生產商</td><td class="value" colspan="6"></td></tr><tr><td class="column" colspan="2">收貨單位</td><td class="value" colspan="3"></td><td class="column">收件人</td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="2">收貨地址</td><td class="value" colspan="3"></td><td class="column">電話</td><td class="value" colspan="3"></td></tr><tr><td class="column" colspan="2">客戶PO號碼</td><td class="value" colspan="2"></td><td class="column" colspan="1">發貨倉庫</td><td class="value" colspan="3"></td></tr><tr><td class="column">序號</td><td class="column">藥品名稱</td><td class="column">劑型</td><td class="column">規格</td><td class="column">數量</td><td class="column">單位</td><td class="column">批號</td><td class="column">有效期至</td></tr><tr v-for="i in 3" :key="i"><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td><td class="value" colspan="1"></td></tr><tr><td class="value" colspan="8"><div style="display: flex; flex-direction: column;"><div style="display: flex; justify-content: flex-start;">審核人意見：</div><divstyle="display: flex; justify-content: flex-end; margin-top: 20px">審核人日期/時間：__________________</div></div></td></tr><tr><td class="column" colspan="8">發貨信息（發貨人填寫）</td></tr><tr><td class="column" colspan="2">承運公司</td><td class="value" colspan="2"></td><td class="column" colspan="2">啟運時間</td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="2">溫度儀器編號</td><td class="value" colspan="2"></td><td class="column" colspan="2">啟運溫度</td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="2">保溫箱編號</td><td class="value" colspan="2"></td><td class="column" colspan="2">攬件車牌號</td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="2">客戶PO號碼</td><td class="value" colspan="2"></td><td class="column" colspan="2">冷鏈運輸單號</td><td class="value" colspan="2"></td></tr><tr><td class="column" colspan="2">發貨人/日期</td><td class="value" colspan="2"></td><td class="column" colspan="2">攬件人/日期</td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="8" style="text-align: left">備注：</td></tr><tr><td class="column" colspan="8">收貨信息（收貨人填寫）</td></tr><tr><td class="column" colspan="2">到達簽收時間</td><td class="value" colspan="2">____年__月__日__時__分</td><td class="column" colspan="2">到達時溫度</td><td class="value" colspan="2">℃</td></tr><tr><td class="column" colspan="2">運輸是否超溫</td><td class="value" colspan="2">__是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__否</td><td class="column" colspan="2">數量是否正確</td><td class="value" colspan="2">__是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__否</td></tr><tr><td class="column" colspan="2">貨物是否完好</td><td class="value" colspan="2">__是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__否</td><td class="column" colspan="2">物品是否接收</td><td class="value" colspan="2">__是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__否</td></tr><tr><td class="column" colspan="2">接收人/日期</td><td class="value" colspan="2"></td><td class="column" colspan="2">配送人/日期</td><td class="value" colspan="2"></td></tr><tr><td class="value" colspan="8" style="text-align: left">備注：</td></tr></table><br /><div style="line-height: 30px; color: #333333;"><div>*此記錄基本信息欄為電子錄入記錄。</div><div>注1.此隨貨同行單簽收后由承運公司配送人拍照，須匯同此票藥物運輸過程溫度記錄數據形成電子檔，于簽收后24小時內傳回給發貨委托人，并于一個月內將紙檔寄回給發貨委托人.</div><div>&nbsp;&nbsp;&nbsp;2.留在物控部保存的單據可無須填寫收貨信息項.</div></div><br /></div></div></div> </template> <script> export default {data() {return {};},props: [""],watch: {},computed: {},created() {},methods: {// 編輯editSend() {this.$router.push({path: "/auditSendDetail",query: { type: "sendDetail" }});},// 打印交接單printSendTable() {this.$print(this.$refs.print);},// 查看出貨單previewSendTable() {this.$router.push({path: "/orderTable",query: { type: "orderTable" }});}} }; </script><style scoped> .button_group {margin-top: 30px;margin-right: 30px;display: flex;align-items: center;justify-content: flex-end; } .print {width: 90%;margin: 0 auto;max-width: 1280px; } .table {border-collapse: collapse;border-spacing: 0;background-color: transparent;display: table;width: 100%;max-width: 100%;width: 800px;margin: 0 auto; } .table td {text-align: center;vertical-align: middle;font-size: 14px;font-family: "Arial Normal", "Arial";color: #333333;padding: 8px 12px; } .table-bordered {border: 1px solid #ddd; } .column {width: 30px;height: 30px;border: 1px solid #333;background: #f1f1f1; } .value {width: 70px;height: 30px;border: 1px solid #333; } </style>

2.新建一個print.js的文件

// 打印類屬性、方法定義 /* eslint-disable */ const Print = function (dom, options) {if (!(this instanceof Print)) return new Print(dom, options);this.options = this.extend({'noPrint': '.no-print'}, options);if ((typeof dom) === "string") {this.dom = document.querySelector(dom);} else {this.isDOM(dom)this.dom = this.isDOM(dom) ? dom : dom.$el;}this.init();};Print.prototype = {init: function () {var content = this.getStyle() + this.getHtml();this.writeIframe(content);},extend: function (obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},getStyle: function () {var str = "",styles = document.querySelectorAll('style,link');for (var i = 0; i < styles.length; i++) {str += styles[i].outerHTML;}str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";return str;},getHtml: function () {var inputs = document.querySelectorAll('input');var textareas = document.querySelectorAll('textarea');var selects = document.querySelectorAll('select');for (var k = 0; k < inputs.length; k++) {if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {if (inputs[k].checked == true) {inputs[k].setAttribute('checked', "checked")} else {inputs[k].removeAttribute('checked')}} else if (inputs[k].type == "text") {inputs[k].setAttribute('value', inputs[k].value)} else {inputs[k].setAttribute('value', inputs[k].value)}}for (var k2 = 0; k2 < textareas.length; k2++) {if (textareas[k2].type == 'textarea') {textareas[k2].innerHTML = textareas[k2].value}}for (var k3 = 0; k3 < selects.length; k3++) {if (selects[k3].type == 'select-one') {var child = selects[k3].children;for (var i in child) {if (child[i].tagName == 'OPTION') {if (child[i].selected == true) {child[i].setAttribute('selected', "selected")} else {child[i].removeAttribute('selected')}}}}}return this.dom.outerHTML;},writeIframe: function (content) {var w, doc, iframe = document.createElement('iframe'),f = document.body.appendChild(iframe);iframe.id = "myIframe";//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');w = f.contentWindow || f.contentDocument;doc = f.contentDocument || f.contentWindow.document;doc.open();doc.write(content);doc.close();var _this = thisiframe.onload = function(){_this.toPrint(w);setTimeout(function () {document.body.removeChild(iframe)}, 100)}},toPrint: function (frameWindow) {try {setTimeout(function () {frameWindow.focus();try {if (!frameWindow.document.execCommand('print', false, null)) {frameWindow.print();}} catch (e) {frameWindow.print();}frameWindow.close();}, 10);} catch (err) {console.log('err', err);}},isDOM: (typeof HTMLElement === 'object') ?function (obj) {return obj instanceof HTMLElement;} :function (obj) {return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';}};const MyPlugin = {}MyPlugin.install = function (Vue, options) {// 4. 添加實例方法Vue.prototype.$print = Print}export default MyPlugin

3.在main.js中引入print

import Print from '@/util/print' Vue.use(Print)

然后就可以打印啦

?

?

總結

以上是生活随笔為你收集整理的vue: table制作发货单表格并打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。