vue2 解密图片地址(url)-使用blob文件-打开png格式图片

一、背景

开发中需要对加密文件进行解码,如图片等静态资源。

根据后端给到的url地址,返回的是图片文件,但是乱码的,需要解码成png图片进行展示

二、请求接口

将后端返回的文件转为文件流, 创建Blob对象来存储二进制数据,通过URL.createObjectURL()方法创建二进制数据的URL,将URL赋值给imgData以显示图片。

javascript 复制代码
 //初始化图片数据并进行处理
    initImg() {
      this.isLoading = true
      //请求携带的参数
      let param = {
        printType: this.printType,
        orderIdList: Array.isArray(this.orderIdList) ? this.orderIdList : this.orderIdList.split(','),
        billTypeList: this.billType.split(',')
      }
      let promise
      //发请求,此处是封装的请求
      promise = this.$http.any('post', `${this.$url.payList.getPrintReceipt}`, {}, param, null, 'blob')
      // 发起POST请求,获取打印收据的二进制数据,并将结果赋值给promise变量
      promise
        .then((res) => {
          let reader = new FileReader() // 创建FileReader对象,用于读取二进制
          let response = null
          reader.onload = () => {
            // 如果读取的结果是以'{'开头,则将其解析为JSON对象
            if (reader.result[0] == '{') {
              response = JSON.parse(reader.result)
              this.$message.error(response.msg)
            } else {
              this.inChooseCharge = false
              let fileType = 'png' // 设置文件类型为png
              let blob = new Blob([res], { type: `application/${fileType}` }) // 创建Blob对象,用于存储二进制数据
              let data = window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob) // 通过URL.createObjectURL()方法创建二进制数据的URL
              this.imgData = data // 将URL赋值给imgData,用于显示图片
              console.log('printinitImg -- imageData', this.imgData)

              let img = new Image()
              // 当图片加载完成时执行回调函数
              img.onload = () => {
                //对图片宽高比进行判断
                if (img.width / img.height >= 1100 / 595) {
                  this.fitWidth = true
                } else {
                  this.fitWidth = false
                }
                this.$nextTick(() => {
                  this.popupDoLayout()
                })
              }
              img.src = this.imgData
            }
            this.isLoading = false
          }
          reader.readAsText(res, 'utf-8') // 以文本格式读取二进制数据
        })
        .catch((error) => {
          this.isLoading = false
          console.log('请求失败:', error)
        })
    }

说明:发请求时要说明是转换成blob ,再创建Blob对象,存储二进制数据。最主要的还是要多打日志,看每一步的结果,再做对应操作!!!

MDN文件参考:👉URL.createObjectURL() - Web API 接口参考 | MDN

三、结构

使用img展示图片,利用element的image-viewer来进行图片缩放,需要从element中引入

javascript 复制代码
<div class="main print-box" :class="{ 'fit-width': fitWidth, 'fit-height': !fitWidth }" v-else>
      <img class="img" :src="imgData" alt="预览图" @load="popupDoLayout" @click="imgData ? getShowViewer(imgData) : null" />
      <div class="flex bottom-box">
        <el-button type="primary" @click="print" :disabled="!imgData">打印</el-button>
      </div>
    </div>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="viewerImgList" />

从element中引入image-viewer使用👇

相关推荐
heart000_19 小时前
128K 长文本处理实战:腾讯混元 + 云函数 SCF 构建 PDF 摘要生成器
人工智能·自然语言处理·pdf
开开心心_Every9 小时前
便捷的Office批量转PDF工具
开发语言·人工智能·r语言·pdf·c#·音视频·symfony
斯~内克12 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
Eiceblue1 天前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
wh39332 天前
使用Python将PDF转换成word、PPT
python·pdf·word
开开心心就好2 天前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
Jinxiansen02112 天前
FileReader 文件读取与上传至后端 - Excel & PDF 示例
前端·vue.js·pdf·excel
念九_ysl3 天前
Java 使用 OpenHTMLToPDF + Batik 将含 SVG 遮罩的 HTML 转为 PDF 的完整实践
java·开发语言·pdf
晋人在秦 老K3 天前
大小不足5M,轻量级PDF阅读工具
windows·pdf·工具
一头生产的驴3 天前
java整合itext pdf实现自定义PDF文件格式导出
java·spring boot·pdf·itextpdf