Vue 文件流预览 PDF

Vue

js

// pdf 预览
export function download(id) {
  return request({
    url: '/bbs/regtech/law/download?id='+id,
    method: 'get',
    responseType: "blob",
  })
}

弹框方式打开/也可设置成在新页面打开

      <el-dialog
        :title="title"
        :visible.sync="viewVisible"
        width="100%"
        height="100%"
        center
      >
        <template>
          <iframe
            class="prism-player"
            :src="pdfUrl"
            width="100%"
            height="800px"
          ></iframe>
        </template>
      </el-dialog>

import { download } from "@/api/assistance";
export default {
  data() {
    return {
      pdfUrl: "",
      title: "",
      viewVisible: false,
    };
  },
  methods: {
    gopdf() {
      var id = "1515969321506050048";
      download(id).then((res) => {
        const binaryData = [];
        binaryData.push(res.data);
        let url = window.URL.createObjectURL(
          new Blob(binaryData, { type: "application/pdf" })
        );
        this.pdfUrl = url;

       // this.viewVisible = true;  当前页弹框打开
        // 新页面打开
        window.open(url);
      });
    },
  },
};

Java 文件流输出

    @Override
    public void download(HttpServletResponse response, String id) {
        LawFile lawFile = this.getById(id);
        String uploadPath = lawFile.getUploadPath();
        String fileName = lawFile.getTitle();
        try {
            // 创建输出流对象
            ServletOutputStream outputStream = response.getOutputStream();
            //以字节数组的形式读取文件
            byte[] bytes = FileUtil.readBytes(uploadPath);
            // 设置返回内容格式
            response.setContentType("application/octet-stream");
            fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");
            // 设置下载弹窗的文件名和格式(文件名要包括名字和文件格式)
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
            // 返回数据到输出流对象中
            outputStream.write(bytes);
            // 关闭流对象
            IoUtil.close(outputStream);
        } catch (Exception ignored) {
            log.error(ignored.getMessage());
        }
    }
posted @   好事的猫  阅读(1280)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示