zdxtLawEnforcementCodeView/src/views/enterprise/qrCode.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav
				:slefBack="true"
				@goBack="goBack"
				:titelText="`执法监督码`"
			>
			</header-nav>
		</div>
		<!-- 中间 -->
		<div class="warp_body">
      <div class="qr_code">
        <div class="qr_name">
          <span>{{ data.enterpriseName }}</span>
        </div>
          <div class="qr_code_img" id="qr_code_img">
            <van-image
              width="100%"
              height="100%"
              :src="data.qrCodeUrl"
            />
          </div>
          <span class="qr_code_text">扫一扫上面的二维码，获取企业执法信息</span>
      </div>
      <van-action-bar>
        <van-action-bar-button text="下载二维码" @click="download(data.qrCodeUrl)" />
        <van-action-bar-button text="二维码管理" />
      </van-action-bar>
		</div>
	</div>
</template>

<script setup name="register">
import axios from "axios";
import {baseUrl} from "../../config/env";
import html2canvas from "html2canvas"
import {queryEnterpriseInformationQrCode} from '../../api/enterprise'
import { reactive } from "vue";
const { useMy } = $globalStore

const router = useRouter();
const route = useRoute();
const data = reactive({
  qrCodeUrl:"",
  enterpriseName:""
});


// 返回
const goBack = () => {
	router.go(-1);
};


onMounted(() => {
	console.log(route?.query?.enterpriseNumber);

  queryEnterpriseInformationQrCode({"enterpriseNumber": route?.query?.enterpriseNumber}
  ,success =>{
      console.log(success)
      if(success.success){
        data.qrCodeUrl = baseUrl + success.data.qrCodeUrl;
        data.enterpriseName = success.data.enterpriseName;
        console.log(data.qrCodeUrl)
      }
  },error =>{
    console.log("查询失败")
  })
});

const downloadFile = (url) => {
      const a = document.createElement('a')
      a.href = url
      a.download = "123456" // 下载后文件名
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click() // 点击下载
      document.body.removeChild(a) // 下载完成移除元素
}
const download = (url) =>{
    //  let e = this.$refs.toast;
    debugger
     html2canvas(document.getElementById('download-images'), {
         allowTaint: true,
         useCORS: true, // 设置跨域
         tainttest: true, // 检测每张图片都已经加载完成
         backgroundColor: null, // 背景色, 转换图片可能会有白色底色，不要的话就null
     }).then((canvas) => {
         const link = document.createElement("a"); // 创建一个超链接对象实例
         link.download = "http://139.186.135.156:85/profile//2024/03/27/d2f57b93fd86d266c462a315349c13f8.jpg"; // 设置要下载的图片的名称
         link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
         link.click(); // 触发超链接的点击事件
     });
  }

</script>
<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #f4f4f4;
}
.warp_body{
  .qr_code{
    width: 100%;
    height: 60%;
    background-color:white;
    position: relative;
    .qr_code_img{
      width: 80%;
      height: 70%;
      top: 8%;
      left: 10%;
      position: absolute;
    }
    .qr_code_text{
      display: block;
      font-size: 12px;
      position: absolute;
      bottom: 4%;
      left: 20%;
    }
    .qr_name{
      position: absolute;
      width: 100%;
      height: 10%;
      top: 3%;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>