文档流图片的请求、预览、下载

请求

export function downloadFile(attachmentId) {
  return request({
    url: `xxxx/main/freeflow/v1/extend/projects/materials/attachment/download/${attachmentId} `,
    method: "get",
    responseType: "blob" //设置返回数据格式（必须）
  })
}

预览

// npm install v-viewer -S 下载安装依赖
// 在main.js 中挂载
Vue.use(Viewer)
Viewer.setDefaults({
  // 需要配置的属性 注意属性并没有引号
  // inline: true,
  toolbar: false,
  title: true,
  toolbar: false,
})

在vue 中使用

<template>
  <viewer>
    <img v-for="(decImg, index) in descImgs" :key="index" :src="decImg" style="width: 200px;height: 200px">
  </viewer>
</template>
<script>
export default {
  data () {
    return {
      descImgs: [ 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      ]
    }
  }
}
</script>

二、
预览

{/* <img :src=imgUrl/> */}
const blob = new Blob([res.data]); // 返回的文件流数据
const imageUrl = window.URL.createObjectURL(blob); // 将他转化为路径
console.log(imageUrl.slice(5));
this.imgUrl = imageUrl; //图片路径

下载

// const blob = new Blob([res.data]);
const fileName = item.name;
// 非IE下载
const dlink = document.createElement("a");
dlink.download = fileName;
dlink.style.display = "none";
dlink.href = URL.createObjectURL(blob);
document.body.appendChild(dlink);
dlink.click();
URL.revokeObjectURL(dlink.href); // 释放URL 对象
document.body.removeChild(dlink);
// const obj = {
//   fileName: fileName,
//   url: URL.createObjectURL(blob),
// };
// this.srcList.push(obj);
// IE10 + 下载
navigator.msSaveBlob(blob, fileName);