图片生成加下载
![](https://img2022.cnblogs.com/blog/890760/202211/890760-20221111170348443-2124926489.png)
<template> <div> <!-- 表具报停 --> <Drawer :title="type == 2 ? '表具二维码' : '表具报停'" :closable="false" v-model="DrawerShow" width="50%" > <div> <div class="t-head"> <div> <span>表具编号:{{ infoObj.meterNo }}</span> <span>表具类型:{{ METERTYPE[infoObj.meterType] }}</span> <span>表具形式:{{ RECORDWAY[infoObj.recordWay] }}</span> </div> <div> <span>表具初始读数:{{ infoObj.degree }}</span> <span>安装日期:{{ infoObj.createTime }}</span> <span >预警类型:{{ infoObj.warnType ? infoObj.warnType : "/" }}</span > </div> </div> <!-- 报停 --> <div style="display: flex; margin-top: 20px" v-if="type == 1"> <Form ref="stopFormRef" :model="stopForm" :rules="stopFormRule" :label-width="120" :label-colon="true" style="width: 100%" > <FormItem label="报停人" prop="reportStop"> <Input style="'width:380px" type="text" maxlength="32" v-model="stopForm.reportStop" placeholder="请输入报停人" /> </FormItem> <FormItem label="报停说明" prop="remark"> <Input style="'width:380px" type="textarea" maxlength="200" :rows="6" v-model="stopForm.remark" placeholder="请输入报停说明" /> </FormItem> <FormItem> <Button type="primary" :disabled="btnType" @click="handleSubmit('stopFormRef')" >提交 </Button> <Button @click="goBack()" style="margin-left: 8px">返回</Button> </FormItem> </Form> </div> <!-- 二维码 --> <div class="cont-w" v-if="type == 2"> <div class="qrcode-img"> <img :src="imgUrl" alt="" /> <Button type="primary" :disabled="btnType" @click="imgdown()" >导出 </Button> <p>注:二维码导出后,可添加到设备的表面,便于扫码查询</p> </div> </div> <div class="btn-box" v-if="type == 2"> <Button @click="goBack()" style="margin-left: 8px">返回</Button> </div> </div> </Drawer> </div> </template> <script> import { addReportStop, getMeterQRCode } from "@/api/Instrumentmanagement.js"; import { formatDate } from "@/libs"; import _GLOBAL from "@/libs/config"; export default { components: {}, props: { infoObj: { type: Object, default: () => { return {}; }, }, }, data() { return { METERTYPE: _GLOBAL.meterType, RECORDWAY: _GLOBAL.recordWay, DrawerShow: false, stopForm: { reportStop: "", remark: "", }, stopFormRule: { reportStop: [ { required: true, message: "请输入报停人", trigger: "blur", }, ], remark: [ { required: true, message: "请输入报停说明", trigger: "blur", }, ], }, btnType: false, // meterId: "", type: "", id_: "", imgUrl: "", }; }, watch: {}, filters: { chengearmTime(armTime) { return formatDate(Number(armTime), "yyyy-MM-dd hh:mm:ss"); }, }, mounted() {}, created() {}, methods: { show(row, type) { this.DrawerShow = true; this.handleReset(); this.type = type; this.id_ = row.id; this.imgUrl = this.$store.state.app.getMeterQRCode + "?meterId=" + row.id + "&author-token-key=" + localStorage.getItem("token"); }, imgdown() { let src = this.imgUrl; let canvas = document.createElement("canvas"); let img = document.createElement("img"); let meterNo = this.infoObj.meterNo; // // 解决跨域 Canvas 污染问题 img.setAttribute("crossOrigin", "Anonymous"); img.onload = function (e) { canvas.width = img.width; canvas.height = img.height; let context = canvas.getContext("2d"); //绘制图片 context.drawImage(img, 0, 0, img.width, img.height); canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height); //将canvas转base64码,然后创建一个a连接自动下载图片 canvas.toBlob((blob) => { let link = document.createElement("a"); link.href = window.URL.createObjectURL(blob); link.download = meterNo + "二维码"; link.click(); }, "image/jpeg"); }; //将资源链接赋值过去,才能触发img.onload事件 img.src = src; }, //提交 handleSubmit(name) { this.btnType = true; setTimeout(() => { this.btnType = false; }, 2000); this.$refs[name].validate((valid) => { if (valid) { const params = Object.assign({}, this.stopForm); params.meterId = this.infoObj.id; addReportStop(params).then((res) => { if (res.data.status == 200) { this.$Message.success("提交成功"); //回到列表 this.DrawerShow = false; this.$emit("update"); } else { this.$Modal.error({ title: "提示", content: res.data.desc, }); } }); } }); }, //返回 goBack() { this.DrawerShow = false; this.handleReset(); }, //重置 handleReset() { Object.keys(this.stopForm).forEach((key) => { this.stopForm[key] = ""; }); }, }, destroyed() {}, }; </script> <style lang="less" scoped> .t-head { display: flex; justify-content: space-between; margin-left: 12px; flex-direction: column; div { display: flex; margin: 5px 0; span { display: flex; flex: 1; } } } .cont-w { display: flex; margin-top: 20px; justify-content: center; align-items: center; .qrcode-img { display: flex; align-items: center; justify-content: center; flex-direction: column; img { width: 220px; height: 220px; overflow: hidden; } button { margin: 25px 0; } p { margin: 25px 0; } } } </style>