打印、下载弹框组件

@/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>javascript">
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 = titlethis.src = srcthis.isPreview = isPreviewthis.dialogVisible = true},handlePrint() {this.printLoading = truehtml2canvas(this.$refs.printRef).then((canvas) => {const saveUrl = canvas.toDataURL('image/png')printJS({printable: [saveUrl],type: 'image'})})this.printLoading = false},handleDownload() {this.downloadLoading = truehtml2canvas(this.$refs.printRef).then((canvas) => {const imgUrl = canvas.toDataURL('image/png')let image = document.createElement('img')image.src = imgUrllet a = document.createElement('a')a.href = imgUrla.download = this.titlea.click()a = nullimage = null}).finally(() => {this.downloadLoading = false})},handleClose() {this.title = ''this.src = ''this.isPreview = falsethis.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>javascript">
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) returnthis.$refs.PrintDialogRef.open('操作表', 'data:image/jpg;base64,' + res.data)// this.$refs.PrintDialogRef.open('文件名/弹框title', 'base64前缀' + Base64格式图片)})})},}
}
</script>

弹框展示