后台返回文件流前台预览pdf功能

最近开发的一个功能，文件（jar包、img/png，pdf等等文件）存入minio里面，但是图片和pdf需要预览的功能，记录一下：

后台返回文件流（所有文件的写法都一样，只是bucket和桶里面的路径UUID不一样）：

 1 @Override
 2     public void getPDF(String uuid, HttpServletResponse response) throws IOException {
 3 
 4         // 读到流中
 5         InputStream inputStream = SpringContextUtil.getMinioUtilsBean("avatarBucket").download(uuid);
 6         response.reset();
 7         response.setContentType("application/octet-stream");//application/pdf
 8         response.addHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(uuid, "UTF-8"));
 9         ServletOutputStream outputStream = response.getOutputStream();
10         byte[] buffer = new byte[1024];
11         int len;
12         //从输入流中读取一定数量的字节，并将其存储在缓冲区字节数组中，读到末尾返回-1
13         while ((len = inputStream.read(buffer)) > 0) {
14             outputStream.write(buffer, 0, len);
15         }
16         inputStream.close();
17     }

 axios：

 1 // 获取附件流  PDF的
 2 export const getPDF = (uuid) => {
 3     return axios.request({
 4         url: '/api/cwsh/robotApproval/getPDF',
 5         method: 'post',
 6         params: {
 7             uuid: uuid
 8         },
 9         // headers: {'Content-Type': 'multipart/form-data'},
10         responseType: 'blob'//'muliipart/form-data'//'blob'//'arraybuffer' 假如下面的iframe组件是用来显示pdf或者图片的这里就responseType就可以通过js调用时传参来赋值（pdf为‘blob，图片为‘arraybuffer’’）
11     })
12 }
13 
14 // 机器人头像流返回  图片
15 export const downloadRobot = (avatar) => {
16   return axios.request({
17     url: '/api/cwsh/sysRobot/download',
18     method: 'post',
19     params: {
20       avatar:avatar
21     },
22     responseType: 'arraybuffer'
23   })
24 }

js方法：

//预览pdf部分代码
<template>
<el-check-tag  v-for="(item,index) in detailDataList.fjList" :key="index" class="ml-2"  @click="downloadFile(item.wjbh)" style="margin-left: 2px;">{{item.fjmc}}</el-check-tag>

<el-drawer v-model="innerVisible" title="I am the title" :with-header="false" size="70%">
假如这里iframe是需要展示图片和pdf的，name只需要改axios请求接口的responseType和接收到的流赋值给imgBase64的赋值即可
      <iframe style="width: 100%;height: 100%;" :src="imgBase64"></iframe>
    </el-drawer>
</template>

<script setup lang="ts">
const imgBase64=ref('')
const downloadFile = (minioID)=>{
  debugger
  // ElMessage.info("准备下载"+minioID)
  getPDF(minioID).then(res => {
    debugger
   
    // let urlPdf  = window.URL.createObjectURL(new Blob(res,{type:"application/pdf"})) //用sdk插件
    // imgBase64.value = '/pdf/web/viewer.html?file=' + encodeURIComponent(urlPdf)
假如这里返回的分别是图片的流和pdf的流对应的处理方式
　　　　if(showFileType.value === 'picture') {//图片
     　　 imgBase64.value = "data:image/png;base64," +
       　　 btoa(
         　　 new Uint8Array(res).reduce(
            　　(res,byte) => res + String.fromCharCode(byte),
            　　""
         　　 )
        　　)
    　　}else {// pdf
    　　let blob = new Blob([res], {
      　　type: 'application/pdf' 
    　　let fileURL = URL.createObjectURL(blob);
    　　// window.open(fileURL);
   　　 imgBase64.value = fileURL
    　　}

    
    innerVisible.value=true
  })
  
}

<script/>

图片

 1 <el-image :src="imgBase64"></el-image>
 2 
 3 
 4 
 5 const imgBase64 = ref('')
 6 const downloadRobotFun = function(avatar) {
 7     downloadRobot(avatar).then(res => {
 8       debugger
 9       // imgBase64.value=getBase64(res)
10       imgBase64.value = "data:image/png;base64," +
11       btoa(
12         new Uint8Array(res).reduce(
13           (res,byte) => res + String.fromCharCode(byte),
14           ""
15         )
16       )
17       debugger
18     })
19   }
20 
21

效果：

1.图片

    

2.pdf

 

posted @ 2022-09-22 15:22  我不是习小贵  阅读(3657)  评论(0)  编辑  收藏  举报