后端传入二进制流文件，前端VUE组件预览图片PDF功能

狼人话不多，直接上代码

组件显示

<preview-Dialog :res='resData'></preview-Dialog>

初始化resData

data() {
    return {
      resData:{},
    };
  },

引入组件

import previewDialog from "这里是我的路径，你选择自己的路径";

注册组件

components: {
    previewDialog
  },

下面是核心组件代码，亲测有效（我使用了Element UI记得装）

<template>
  <el-dialog title="文件预览" :visible.sync="lookFile" destroy-on-close>
    <div :style="{ height: '600px', minHeight: '500px', margin: '8px 0px' }">
      <iframe id="pictureId" :src="url" frameborder="0" style="width: 100%; height: 100%"></iframe>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "previewDialog",
  props: ["res"],
  data() {
    return {
      url: "",
      lookFile: false,
    };
  },
  computed: {
    getFile() {
      return this.res;
    },
  },
  watch: {
    getFile(val) {
      let v = this;
      let reader = new window.FileReader();
      reader.readAsArrayBuffer(val);
      reader.onload = function (e) {
        const result = e.target.result;
        const blob = new Blob([result], { type: val.type });
        if (window.createObjectURL != undefined) {
          // basic
          v.url = window.createObjectURL(blob) + "#toolbar=0";
        } else if (window.webkitURL != undefined) {
          // webkit or chrome
          try {
            v.url = window.webkitURL.createObjectURL(blob) + "#toolbar=0";
          } catch (error) {}
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          try {
            v.url = window.URL.createObjectURL(blob) + "#toolbar=0";
          } catch (error) {}
        }
      };
      if (val.type != "application/json") {
        this.lookFile = true;
      } else {
        this.$message.error("不支持zip格式与rar格式预览功能，请使用下载功能");
      }
    },
  },
};
</script>

差点忘了还要从后端获取参数，但我相信机智如你已经会了（狗头保命）

最后附上成功运行的图片,pdf预览

还有下面的png格式图片

程序猿闲暇之余记录下所做工作，希望可以帮到广大奋斗者