From 5b12ae51e0f42a1f17e81afa5385f3df57ea8810 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 08 七月 2022 15:06:26 +0800
Subject: [PATCH] 1.打印测试
---
src/views/scgl/gdpg.vue | 412 ++++------------------------------------------------------
1 files changed, 30 insertions(+), 382 deletions(-)
diff --git a/src/views/scgl/gdpg.vue b/src/views/scgl/gdpg.vue
index 565b40b..72c6e2c 100644
--- a/src/views/scgl/gdpg.vue
+++ b/src/views/scgl/gdpg.vue
@@ -1,405 +1,53 @@
<template>
<div>
+ <h3>鎶ヨ〃鐩存帴鎵撳嵃锛岄�氳繃AJAX鏂瑰紡鑾峰彇鎶ヨ〃妯℃澘涓庢姤琛ㄦ暟鎹�</h3>
- <el-button type="primary" @click="clickMe">鐐瑰嚮鎴�</el-button>
+ <!-- <p><a href="javascript:void" @click.prevent="ws_ajax_print">鐩存帴鎵撳嵃</a></p>-->
+ <p><a href="javascript:void" @click.prevent="ws_ajax_print">鐩存帴鎵撳嵃</a></p>
- <el-dialog
- title="棰勮"
- :visible.sync="dialogVisible"
- width="1140"
- >
- <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
- <div id="printMe" style="padding: 30px">
+ <!-- <h3>鑷畾涔夋墦鍗板弬鏁帮紝鎸囧畾鎵撳嵃鏈猴紝璁剧疆閫愪唤鎵撳嵃涓庢墦鍗颁唤鏁扮瓑</h3>-->
- <div style="display: flex;justify-content: space-around;">
- <!-- 浜岀淮鐮侀儴鍒�-->
- <div>
- <div id="qrCode" ref="qrCodeDiv" />
- <!-- <img :src="QRImgUrl">-->
-
- <div style="font-size: 18px;width: 100px;text-align: center;margin-top: 10px">MO-79601</div>
- </div>
- <!-- 鍏徃鍚嶇О鍙婃墦鍗板崟绫诲瀷-->
- <div
- style="height: 100px;display: flex;justify-content:space-between;align-items: center;flex-direction: column;font-weight: bolder"
- >
- <div style="font-size: 26px;">姘稿悍鏂板嚡杩伐涓氫簰鑱旀湁闄愬叕鍙�</div>
- <div style="font-size: 22px;">濮斿娲惧崟</div>
- </div>
- <!--鍙充晶姘村嵃鍙婂鍚嶆棩鏈�-->
- <div>
- <!-- <div ref="watermark" style="width: 100px;height:100px;" />-->
- <div style="color:#0f0f0f;;width: 100px;margin-top:40px;height: 50px;text-align: center">鍑开鍒堕��</div>
- <div style="font-weight: bolder">
- <div>濮撳悕锛氬紶涓�</div>
- <div>鏃ユ湡锛�2022-07-05</div>
- </div>
- </div>
- </div>
- <!-- <el-divider />-->
- <div style="width:100%;height: 30px;border-bottom: 1px solid #eee;margin-bottom: 20px" />
- <el-table
- id="table"
- :data="tableData"
- border
- class="elTable"
- style="width: 100%;"
- >
- <el-table-column
- id="column0"
- prop="date"
- label="鏃ユ湡"
- width="100"
- />
- <el-table-column
- id="column1"
- prop="name"
- label="濮撳悕"
- width="100"
- />
- <el-table-column
- id="column2"
- prop="address"
- label="鍦板潃"
- width="150"
- />
- <el-table-column
- id="column3"
- prop="address"
- label="鍦板潃"
- width="150"
- />
- <el-table-column
- id="column4"
- prop="address"
- width="150"
-
- label="鍦板潃"
- />
- <el-table-column
- id="column5"
- width="150"
-
- prop="address"
- label="鍦板潃"
- />
- <el-table-column
- id="column6"
- prop="address"
- width="120"
-
- label="鍦板潃"
- />
- <el-table-column
- id="column7"
- width="119"
-
- prop="address"
- label="鍦板潃"
- />
- </el-table>
- </div>
-
- <!-- <vue-easy-print ref="printRef" :button-show="true">-->
- <!-- x-->
- <!-- </vue-easy-print>-->
-
- <!-- 鎵撳嵃鐨勬寜閽紝鏄剧ず鎵撳嵃棰勮 -->
- <!-- <el-button v-print="'#printMe'">鎵撳嵃</el-button>-->
- <el-button v-print="printObj">鎵撳嵃</el-button>
-
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="dialogVisible = false">纭� 瀹�</el-button>
- </span>
- </el-dialog>
-
- <!--2222-->
- <el-dialog
- title="棰勮"
- :visible.sync="dialogVisible2"
- width="1140"
- >
- <!-- 瑕佹墦鍗扮殑鍖哄煙 -->
- <div id="printMe2" style="padding: 30px;">
- <!-- <div style="width: 500px; height: 300px;">-->
-
- <div style="display: flex;width: 300px;height: 200px;border: 1px solid #000;text-align: center;font-size: 16px;">
- <div style="width: 100px;display: flex;flex-direction: column;border-right: 1px solid #000">
- <div style="display: flex;height: 75%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
- <div id="qrCode2" ref="qrCodeDiv2" />
- </div>
- <div style="display: flex;height: 25%;justify-content: center;align-items: center">
- 鏁伴噺锛�100
- </div>
- </div>
- <div style="width:200px;display: flex;flex-direction: column">
- <div style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
- 宸ュ崟缂栧彿锛�1403-001-0001
- </div>
- <div style="display: flex;height: 25%;border-bottom:1px solid #000;justify-content: center;align-items: center ">
- 宸ュ崟缂栧彿锛�1403-001-0001
- </div>
- <div style="display: flex;height: 25%;border-bottom:1px solid #000 ;justify-content: center;align-items: center">
- 宸ュ崟缂栧彿锛�1403-001-0001
- </div>
- <div style="display: flex;height: 25%;justify-content: center;align-items: center">
- 宸ュ崟缂栧彿锛�1403-001-0001
- </div>
-
- </div>
-
- </div>
-
- <!-- </div>-->
- </div>
-
- <!-- <vue-easy-print ref="printRef" :button-show="true">-->
- <!-- x-->
- <!-- </vue-easy-print>-->
-
- <!-- 鎵撳嵃鐨勬寜閽紝鏄剧ず鎵撳嵃棰勮 -->
- <!-- <el-button v-print="'#printMe'">鎵撳嵃</el-button>-->
- <el-button v-print="printObj2">鎵撳嵃</el-button>
-
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible2 = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="dialogVisible2 = false">纭� 瀹�</el-button>
- </span>
- </el-dialog>
-
- <el-button type="text" @click="outerVisible = true">鐐瑰嚮鎵撳紑澶栧眰 Dialog</el-button>
-
- <el-dialog
- title="澶栧眰 Dialog"
- top="15vh"
- :close-on-click-modal="false"
- width="840"
- :visible.sync="outerVisible"
- >
- <el-dialog
- width="30%"
- title="鍐呭眰 Dialog"
- :visible.sync="innerVisible"
- append-to-body
- />
- <div slot="footer" class="dialog-footer">
- <el-button @click="outerVisible = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="innerVisible = true">鎵撳紑鍐呭眰 Dialog</el-button>
- </div>
- </el-dialog>
-
+ <!-- <p>-->
+ <!-- <a href="javascript:void" @click.prevent="ws_ajax_customprint">鑷畾涔夊弬鏁版墦鍗�</a>-->
+ <!-- </p>-->
</div>
</template>
+
<script>
-// import vueEasyPrint from 'vue-easy-print'
-import QRCode from 'qrcodejs2'
-// import QRCode from 'qrcode'
+import { webapp_ws_ajax_run, webapp_urlprotocol_startup, urlAddRandomNo } from '@/utils/grwebapp'
export default {
- name: 'Gdpg',
- // components: {
- // vueEasyPrint
- // },
- data() {
- return {
- outerVisible: false,
- innerVisible: false,
- dialogVisible2: false,
- printObj2: {
- id: 'printMe2',
- beforeOpenCallback(vue) {
- vue.printLoading = true
- console.log('鎵撳紑涔嬪墠')
- console.log()
- },
- openCallback(vue) {
- vue.printLoading = false
- console.log('鎵ц浜嗘墦鍗�')
- },
- closeCallback(vue) {
- console.log('鍏抽棴浜嗘墦鍗板伐鍏�')
- }
-
- },
- firstWatermark: true, // 绗竴娆℃樉绀烘按鍗�
- firstbindQRCode: true, // 绗竴娆℃樉绀轰簩缁寸爜
- form: {
- describle: ''
- },
- QRImgUrl: '',
- QRlink: 'www.xxx.com',
- dialogVisible: false,
- printObj: {
- id: 'printMe',
- popTitle: '鎵撳嵃妯℃澘',
- extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
- previewBeforeOpenCallback() {
- }, // 棰勮绐楀彛鎵撳紑涔嬪墠鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
- previewOpenCallback() {
- }, // 棰勮绐楀彛鎵撳紑涔嬪悗鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
- beforeEntryIframe() {
- const widthArr = ['10%', '10%', '15%', '15%', '15%', '15%', '10%', '10%']
- // const tables = document.getElementById('table').getElementsByTagName('el-table') // 鑾峰彇鎵撳嵃鐨勮〃鏍�
- const tables = document.getElementById('table') // 鑾峰彇鎵撳嵃鐨勮〃鏍�
- // const headcolgroupCol0 = tables[0].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
- // const headcolgroupCol0 = document.getElementById('column0').style.width = '400px'
- // const headcolgroupCol1 = document.getElementById('column1')
- // const headcolgroupCol2 = document.getElementById('column2')
- // const headcolgroupCol3 = document.getElementById('column3')
- // const headcolgroupCol4 = document.getElementById('column4')
- // const headcolgroupCol5 = document.getElementById('column5')
- // const headcolgroupCol6 = document.getElementById('column6')
- // const headcolgroupCol7 = document.getElementById('column7')
- // const headcolgroupCol1 = tables[1].getElementsByTagName('colgroup')[0].getElementsByTagName('col')
- // widthArr.forEach((val, index) => {
- // headcolgroupCol0[index].width = val
- // headcolgroupCol1[index].width = val
- // headcolgroupCol2[index].width = val
- // headcolgroupCol3[index].width = val
- // headcolgroupCol4[index].width = val
- // headcolgroupCol5[index].width = val
- // headcolgroupCol6[index].width = val
- // headcolgroupCol7[index].width = val
- // })
- },
- openCallback() {
-
- }, // 璋冪敤鎵撳嵃涔嬪悗鐨勫洖璋冧簨浠�
- closeCallback() {
- } // 鍏抽棴鎵撳嵃鐨勫洖璋冧簨浠讹紙鏃犳硶纭畾鐐瑰嚮鐨勬槸纭杩樻槸鍙栨秷锛�
-
- // id: 'printMe',
- // popTitle: '鎵撳嵃', // 鎵撳嵃閰嶇疆椤典笂鏂规爣棰�
- // extraHead: '', // 鏈�涓婃柟鐨勫ご閮ㄦ枃瀛楋紝闄勫姞鍦╤ead鏍囩涓婄殑棰濆鏍囩,浣跨敤閫楀彿鍒嗛殧
- // preview: '', // 鏄惁鍚姩棰勮妯″紡锛岄粯璁ゆ槸false锛堝紑鍚瑙堟ā寮忥紝鍙互鍏堥瑙堝悗鎵撳嵃锛�
- // previewTitle: '', // 鎵撳嵃棰勮鐨勬爣棰橈紙寮�鍚瑙堟ā寮忓悗鍑虹幇锛�,
- // previewPrintBtnLabel: '', // 鎵撳嵃棰勮鐨勬爣棰樼殑涓嬫柟鎸夐挳鏂囨湰锛岀偣鍑诲彲杩涘叆鎵撳嵃锛堝紑鍚瑙堟ā寮忓悗鍑虹幇锛�
- // zIndex: '', // 棰勮鐨勭獥鍙ｇ殑z-index锛岄粯璁ゆ槸 20002锛堟鍊艰楂樹竴浜涳紝杩欐秹鍙婂埌棰勮妯″紡鏄惁鏄剧ず鍦ㄦ渶涓婇潰锛�
- // previewBeforeOpenCallback() {}, // 棰勮绐楀彛鎵撳紑涔嬪墠鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
- // previewOpenCallback() {}, // 棰勮绐楀彛鎵撳紑涔嬪悗鐨刢allback锛堝紑鍚瑙堟ā寮忚皟鐢級
- // beforeOpenCallback() {}, // 寮�鍚墦鍗板墠鐨勫洖璋冧簨浠�
- // openCallback() {}, // 璋冪敤鎵撳嵃涔嬪悗鐨勫洖璋冧簨浠�
- // closeCallback() {}, // 鍏抽棴鎵撳嵃鐨勫洖璋冧簨浠讹紙鏃犳硶纭畾鐐瑰嚮鐨勬槸纭杩樻槸鍙栨秷锛�
- // url: '',
- // standard: '',
- // extraCss: ''
- },
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
- }
- },
mounted() {
- this.$nextTick(() => {
- this.bindQRCode()
- })
+ webapp_urlprotocol_startup()
},
methods: {
- addWatermark() {
- if (this.firstWatermark) {
- console.log(this.firstWatermark)
- this.$watermark.set('鍑开鍒堕��', this.$refs.watermark)
- this.firstWatermark = false
+ ws_ajax_print() {
+ // 鍙傛暟鍏蜂綋璇存槑璇峰弬鑰冨府鍔╂枃妗ｄ腑鐨勨�淲EB鎶ヨ〃(B/S鎶ヨ〃)->WEB鎶ヨ〃瀹㈡埛绔�->鍚姩鍙傛暟璇存槑鈥濋儴鍒�
+ var args = {
+ type: 'print',
+ // showOptionDlg: false, //濡傛灉涓嶆樉绀烘墦鍗板璇濇鑰岀洿鎺ユ墦鍗帮紝灏嗘琛屾敞閲婂幓鎺夊嵆鍙�
+ report: urlAddRandomNo('./grf/simple.grf'),
+ data: './data/jsonCustomer.txt'
}
+ console.log(args, 1)
+ webapp_ws_ajax_run(args)
},
- clickMe() {
- this.dialogVisible = true
- this.$nextTick(() => {
- this.bindQRCode()
- this.addWatermark()
- console.log(document.getElementById('column0').style.width = '200px', 0)
- console.log(document.getElementById('column7'), 7)
- console.log(document.getElementById('table'), 2)
- console.log(document.getElementById('table').getElementsByTagName('el-table'), 1)
- })
- },
- bindQRCode() {
- if (this.firstbindQRCode) {
- const text = 'PO202206280001;Step02'
- new QRCode(this.$refs.qrCodeDiv2, {
- // text: 'Vue瀹炵幇鐢熸垚浜岀淮鐮侊紒',
- text: text,
- width: 80,
- height: 80,
- colorDark: '#333333', // 浜岀淮鐮侀鑹�
- colorLight: '#ffffff', // 浜岀淮鐮佽儗鏅壊
- correctLevel: QRCode.CorrectLevel.L// 瀹归敊鐜囷紝L/M/H
- })
- this.firstbindQRCode = false
+ ws_ajax_customprint() {
+ // 鍙傛暟鍏蜂綋璇存槑璇峰弬鑰冨府鍔╂枃妗ｄ腑鐨勨�淲EB鎶ヨ〃(B/S鎶ヨ〃)->WEB鎶ヨ〃瀹㈡埛绔�->鍚姩鍙傛暟璇存槑鈥濋儴鍒�
+ var args = {
+ type: 'print', // 濡傛灉鏄杩涜鎵撳嵃锛屽皢 type 璁剧疆涓� print
+ report: urlAddRandomNo('./grf/simple.grf'),
+ data: './data/jsonCustomer.txt',
+ PrinterName: 'Microsoft Print to PDF', // 鎸囧畾瑕佽緭鍑虹殑鎵撳嵃鏈哄悕绉�
+ Collate: false, // 涓嶆寜閫愪唤鏂瑰紡鎵撳嵃
+ Copies: 5 // 鍏辨墦鍗�5浠�
}
- // const opts = {
- // errorCorrectionLevel: 'L', // 瀹归敊绾у埆
- // type: 'image/png', // 鐢熸垚鐨勪簩缁寸爜绫诲瀷
- // quality: 0.3, // 浜岀淮鐮佽川閲�
- // margin: 5, // 浜岀淮鐮佺暀鐧借竟璺�
- // width: 128, // 瀹�
- // height: 128, // 楂�
- // text: 'http://www.baidu.com', // 浜岀淮鐮佸唴瀹�
- // color: {
- // dark: '#666666', // 鍓嶆櫙鑹�
- // light: '#fff'// 鑳屾櫙鑹�
- // }
- // }
- // // this.QRlink 鐢熸垚鐨勪簩缁寸爜鍦板潃url
- // QRCode.toDataURL(this.QRlink, opts, (err, url) => {
- // if (err) throw err
- // // 灏嗙敓鎴愮殑浜岀淮鐮佽矾寰勫鍒剁粰data鐨凲RImgUrl
- // this.QRImgUrl = url
- // })
+ webapp_ws_ajax_run(args)
}
-
}
}
</script>
-<style media="print">
-/*@media print {*/
- @page {
- /*size: auto;*/
- size: auto;
- margin: 3mm;
- /*margin: 0mm;*/
- /*padding: 0;*/
- }
-/*}*/
-/*.elTable {*/
-
-/*::v-deep .el-table {*/
-/* margin-top: 10px;*/
-/*}*/
-/*table {*/
-/* width: 100% !important;*/
-/*}*/
-
-/*.el-table__body,*/
-/*.el-table__header {*/
-/* width: 100% !important;*/
-/*}*/
-
-/*.el-table__body {*/
-/* width: 100% !important;*/
-/*}*/
-
-/*}*/
-
-/*/deep/.el-table__body-wrapper::-webkit-scrollbar{*/
-/* width: 0;*/
-/*}*/
+<style>
</style>
-
--
Gitblit v1.9.3