PrintLadingBill.vue

<template>
    <el-dialog :title="title" visible :before-close="closeDialog" width="1000px">
        <el-result :sub-title="$t('加载中')" v-if="loading">
            <i class="el-icon-loading" slot="icon" style="font-size: 40px" />
        </el-result>
        <pdf-viewer id="pdfViewer" ref="viewer" v-if="pdfData" :url="pdfData" style="display:block; margin: 0 auto; max-height: 80vh; overflow:auto;" />
        <!-- <div v-if="detail" class="billcontent" v-html="detail.billContent"></div> -->
        <p class="subs" style="text-align:center">
            <el-button type="primary" @click="download" :disabled="!detail">{{$t('下载')}}</el-button>
            <el-button type="primary" @click="print" :disabled="!detail">{{$t('打印')}}</el-button>
        </p>
    </el-dialog>
</template>
<script>
import {parseTime} from '@/utils/ruoyi'
import {getLadingBill} from '@/api/ecw/order'
import lodop from '@/utils/lodop'
import PdfViewer from '@/components/PdfViewer'
import FileSaver from 'file-saver'
import {downloadByOrderId} from '@/api/ecw/box'
import html2canvas from 'html2canvas'
export default {
    components: {PdfViewer},
    filters: {parseTime},
    props:{
        //transportType: Number,
        // tidanNO: [String, Number],
        orderId: String
    },
    data(){
        return {
            show: false,
            /* detail: null,
            preview: false,
            billLadingNo: 'TD20220717',
            type: 1, */
            pdfData: null,
            detail: null,
            loading: false
        }
    },
    watch:{
        detail(){
            /* this.pdfData = this.detail.imgUrl */
            fetch(this.detail.imgUrl).then(async response => {
                console.log(response)
                this.pdfData = await response.arrayBuffer()
            })
        }
    },
    computed:{
        title(){
            let t = this.$t('提货单')
            if(this.tidanNO){
                t += '-' + this.tidanNO
            }
            return t
        },
        /* type(){
            if(this.transportType <= 2) return 1
            if(this.transportType == 3) return 3
            if(this.transportType == 4) return 2
        } */
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            this.loading = true
            downloadByOrderId(this.orderId)
            .then(res => {
                this.detail = res.data
                /* this.pdfData = arrayBuffer */
            })
            .finally(() => {
                this.loading = false
            })
        },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        
        download(){
            let blob = new Blob([this.pdfData], {type: "application/pdf"})
            FileSaver.saveAs(blob, this.detail.imgUrl.split("/").pop()); 
        },
        print(){
            lodop().then(LODOP => {
                LODOP.PRINT_INIT(this.title);
                LODOP.SET_PRINT_STYLE("FontSize",18);
                LODOP.SET_PRINT_STYLE("Bold",1);
                LODOP.SET_PRINT_PAGESIZE(0);
                LODOP.SET_PRINT_PAGESIZE(0,2100,2970,"A4");
                // html2canvas(document.querySelector('.billcontent'))
                let dataURLs = this.$refs.viewer.getDataURLs()
                console.log(dataURLs)
                for(let page in dataURLs){
                    LODOP.ADD_PRINT_HTM(0,0, "100%", "100%", "<img style='width:100%; height:100%' src='"+dataURLs[page]+"' />")
                    if(page < dataURLs.length - 1){
                        LODOP.NewPage()
                    }
                }
                LODOP.PREVIEW();
                // LODOP.ADD_PRINT_PDF(0,0,"100%","100%",data);
                
                // LODOP.PREVIEW(); // 预览
                /* LODOP.PRINTA(); // 选择打印机
                // 直接打印 */
            }).catch(err => {
                console.error('lodop异常', err)
                // alert('请检查LODOP打印控件是否安装并启动');
            })
            
            
        }
    }
}
</script>
<style scoped>
.ptab th{border:1px solid #333;text-align: center;font-size: 14px;border:1px dashed #ccc;}
.ptab td{border:1px solid #333;padding:0px 5px;font-size: 14px;border:1px dashed #ccc;word-wrap:break-word}
.ptab td input[type='text']{width:60%;}
.ptab td a{color:#4e9cdd;font-weight:600;}
#laay{width:98%;margin:0 auto;margin-top: 30px;}
#laay table{width:100%;margin:0 auto;}
#laay table tr{min-height:30px;}
#laay table tr th{font-size: 16px;text-align: right;vertical-align: top;padding: 15px 0px;width:120px;}
#laay table tr th span{color:red;padding:0px 0px 0px 5px;}
#laay table tr td{font-size: 16px;text-align: left;padding:10px 10px; position: relative;}
#laay table tr td #xlss{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlss p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssaa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssaa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td input[type='text']{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:60%;}
#laay table tr td textarea{height:50px;border:1px solid #ddd;padding: 10px 15px;font-size: 16px;width:60%;}
#laay table tr td input[type='radio']{height:30px;float:left;cursor: pointer;}
#laay table tr td .span{float:left;line-height: 30px;}
#laay table tr td .p{border:1px solid #ddd;font-size:16px;width:60%;padding: 0 16px;line-height:30px;cursor: pointer;}
#laay table tr td select{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:67%;}
#laay table tr td div p{padding: 5px 0px;line-height: 40px;}
#laay table tr td .dels{padding: 1px 8px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
#laay table tr td .adds{padding: 1px 5px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
.checkbox{text-align: center;}
.checkbox input{text-decoration: none;padding:10px 15px;background:#ccc;border-radius: 5px; cursor: pointer;margin-bottom: 15px;font-size: 16px;margin:0 2px;}

</style>