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 @ 2022-04-19 17:49  暮雨寒冬  阅读(1274)  评论(0编辑  收藏  举报