【弹框组件封装】展示、打印、下载XX表（Base64格式图片）

目录 打印、下载弹框组件组件使用弹框展示

打印、下载弹框组件

@/components/PrintDialog.vue

<!-- 打印、下载弹框 --> <template> <el-dialog :title="title" top="3vh" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" width="50%" > <div ref="printRef"> <el-image :src="src" :preview-src-list="[src]" /> </div> <div v-if="!isPreview" slot="footer"> <el-button @click="handleClose">取消</el-button> <el-button :loading="downloadLoading" type="primary" @click="handleDownload">下载</el-button> <el-button :loading="printLoading" type="primary" @click="handlePrint">打印</el-button> </div> </el-dialog> </template> <script> import html2canvas from 'html2canvas' import printJS from 'print-js' export default { name: 'PrintDialog', components: {}, data() { return { dialogVisible: false, downloadLoading: false, printLoading: false, title: '', src: '', isPreview: false } }, computed: {}, watch: {}, created() {}, methods: { open(title, src, isPreview = false) { this.title = title this.src = src this.isPreview = isPreview this.dialogVisible = true }, handlePrint() { this.printLoading = true html2canvas(this.$refs.printRef).then((canvas) => { const saveUrl = canvas.toDataURL('image/png') printJS({ printable: [saveUrl], type: 'image' }) }) this.printLoading = false }, handleDownload() { this.downloadLoading = true html2canvas(this.$refs.printRef) .then((canvas) => { const imgUrl = canvas.toDataURL('image/png') let image = document.createElement('img') image.src = imgUrl let a = document.createElement('a') a.href = imgUrl a.download = this.title a.click() a = null image = null }) .finally(() => { this.downloadLoading = false }) }, handleClose() { this.title = '' this.src = '' this.isPreview = false this.dialogVisible = false } } } </script> <style lang='scss' scoped> @import '@/styles/dialog-scss.scss'; .el-image { width: 100%; } </style> 组件使用 <template> <el-button :disabled="selectList.length !== 1" icon="iconfont ico-daochu" type="text" size="mini" @click="printHandler" > 打印记分决定操作表 </el-button> <!-- 打印 --> <PrintDialog ref="PrintDialogRef" /> </template> <script> import { previewScore } from '@/api/twelve-points' import OperationDialog from './components/OperationDialog' export default { components: { PrintDialog }, data() { return { jfbh: '' } }, methods: { printHandler() { console.log('打印记分告知单') previewScore({ jdbh: this.jfbh }).then((res) => { this.$common.CheckCode(res, null, () => { if (!res.data) return this.$refs.PrintDialogRef.open('操作表', 'data:image/jpg;base64,' + res.data) // this.$refs.PrintDialogRef.open('文件名/弹框title', 'base64前缀' + Base64格式图片) }) }) }, } } </script> 弹框展示