vue3+ts:（详细版本）后端返回小程序二维码的数据流，前端直接转换数据流到页面显示小程序二维码，通过扫码跳转到指定的小程序页面

这是后端做完了所有工作，前端只负责拿到数据，进行展示即可.

从后端获取到的数据流（随便在网上找的图片【千尘，不染】）：

template部分：

  <el-button type="primary" link @click="openDialog(scope.row)">生成二维码</el-button>
...
<!-- Dialog 对话框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="20%" @close="handleClose" center>
      <div class="image-container">
        <el-image :src="imageStream" alt="二维码" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveImage">下载</el-button>
        </div>
      </template>
    </el-dialog>

script部分：

//前面自己引入接口getQRCode（获取二维码接口）
const dialogVisible = ref(false); //二维码弹框
const title = ref(""); //二维码弹框标题
const imageStream = ref();

// 打开 Dialog
const openDialog = async (DialogData: any) => {
  dialogVisible.value = true; // 打开二维码弹框
  title.value = DialogData.name; // 设置二维码弹框标题
  // 确保 scene 的值为字符串
  //这里根据后端的接口来
  const params: any = {
    scene: String(DialogData.id), //二维码参数
    page: "pages/school/school", //跳转页面
    checkPath: false, //是否检测path
    envVersion: "develop" //开发版本
  };

  try {
    // 获取二维码图片的流，确保响应类型为 blob
    const blob = await getQRCode(params);
    console.log("blob", blob);
    // 将响应数据直接处理为 Blob 对象
    const blobObject = new Blob([blob]);
    // 创建一个 FileReader 对象用于读取 Blob 数据
    const fileReader = new FileReader();
    // 将 Blob 数据转换为 Data URL
    fileReader.readAsDataURL(blobObject);
    // FileReader 读取完成后的回调
    fileReader.onload = () => {
      // 将生成的 Data URL 赋值给 imageStream
      imageStream.value = fileReader.result as string;
    };
  } catch (error) {
    console.error("Error fetching image stream:", error);
  }
};

//下载二维码
const saveImage = () => {
  if (imageStream.value) {
    // console.log("下载二维码", imageStream.value);
    const link = document.createElement("a"); // 创建一个 a 标签
    link.href = imageStream.value; // 将 a 标签的 href 属性设置为图片的 Data URL
    link.download = "qrcode.png"; // 设置下载的文件名
    document.body.appendChild(link); // 将 a 标签添加到 body 中
    link.click(); // 模拟点击 a 标签
    document.body.removeChild(link); // 移除 a 标签
  }
};

// 关闭 Dialog
const handleClose = () => {
  dialogVisible.value = false;
};

样式部分：根据屏幕自适应大小居中显示二维码

<style scoped>
/* 图片自适应居中显示 */
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.el-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
</style>

跳转指定的小程序页面： page: "pages/school/school",

在此页面加入判断，如果有sence的值，就根据他的值调用这个页面的详情

小程序school文件：

async onLoad(obj) {
			... ...
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			const scene =Number(decodeURIComponent(obj.scene))
			if(scene){
				console.log(scene,"1111111111")
				const res = await this.getSchool(scene)
				console.log(res,"通过扫描二维码进入的页面")
				......
			}else{
				//通过小程序进入的页面并获取到驾校详情
				const res = await this.getSchool(obj.insId)
				console.log(res,"通过小程序进入的页面")
				......
			}
		},