The front end parses the binary stream to realize file download and file preview

foreword

First of all, let's start to understand what a file stream is , which is a data stream with external storage files as input and output objects. Each file stream has a corresponding memory buffer corresponding to it. File stream is not a stream composed of several files. Stream is the process of data transmission. File stream refers to the stream with files as input and output objects. In short, in the front-end and back-end data transfer, a water flow Download or preview files or pictures in the same way.

The use of binary streams in projects

Leg piece preview for binary stream
PDF preview of binary stream
Binary stream file download
Stream files and base64 strings are transferred to each other

Binary Stream Preview Handling

For the preview of files or pictures generated by the binary stream, it is common that we need to scan the code to generate a QR code picture on the PC, or need to preview the files generated by related materials, so what should we do in the project? How to deal with it? Not much to say about the code

1. Preview of binary stream pictures (two ways)

//前端页面展示使用img标签的src 作为图片展示的方法
 <template>
    <div>
         <img class="img-code" :src="qrcode" />
    </div>
</template>
export default {
    
    
    data() {
    
    
        return {
    
    
            qrcode: '',,
        }
    },
    created() {
    
    },
    async mounted() {
    
    
        this.getconfirmQrCode()
    },
    methods: {
    
    
    //方式一：blob处理后端返回的数据
        getconfirmQrCode() {
    
    
                confirmQrCode({
    
     后端接口的参数 })
                    .then((res) => {
    
    
                        const myBlob = new window.Blob([res], {
    
     type: 'image/png' })
                        const qrUrl = window.URL.createObjectURL(myBlob)
                        this.qrcode = qrUrl
                    })
        },
    //方式二：axios指定responseType为blob类型接收响应：
     getconfirmQrCode() {
    
    
                confirmQrCode({
    
     后端接口的参数， responseType: 'blob', })
                    .then((res) => {
    
    
                        this.qrcode =  window.URL.createObjectURL(res);
                    })
        },
    },
}

1. Preview of binary stream PDF (two ways)

//前端页面展示使用iframe标签的src 作为图片展示的方法
 <template>
    <div>
      <iframe :src="src" frameborder="0" style="width: 100%; height: 500px"></iframe>
    </div>
</template>

Download processing of binary streams

insert image description here
The data returned by the backend is shown in the figure above, we only need to adjust the following content

function handleDownloadFile(uuid, fileName) {
    
    
  const file = await downloadFile(uuid);  // 下载接口，返回文件流
  const blob = new Blob([file]);
  const a = document.createElement("a");
  const objectUrl = URL.createObjectURL(blob);
  a.setAttribute("href", objectUrl);
  a.setAttribute("download", fileName);
  a.click();

  URL.revokeObjectURL(a.href); // 释放url
}

The above is the relevant content of file stream processing. If you think it is good, don’t forget to like and follow, and leave a precious heart in the comment area~

insert image description here