vue2 前端实现pdf在线预览（无插件版）

88岁偷懒被抓

已于 2024-07-26 09:35:41 修改

阅读量107

点赞数 1

文章标签：前端 pdf

于 2024-07-26 09:33:19 首次发布

本文链接：https://blog.csdn.net/newbaby123/article/details/140706799

版权

toFielDetail()是点击预览的方法，getOfficialFile是获取文件流的接口正常定义即可：

export function getOfficialFile(query) {
  return request({
    url: '/dataAsset/projectassess/getOfficialFile',
    method: 'get',
    params: query,
  });
}

调用接口的页面需要引用axios页面

import request from '@/router/axios';

toFielDetail() {
      getOfficialFile().then((res) => {
        const { bucketName, fileName } = res.data.data;
        return request({
          url: '/admin/sys-file/' + bucketName + '/' + fileName,
          method: 'get',
          responseType: 'blob',
        }).then((response) => {
          const binaryData = [];
          binaryData.push(response.data);
          console.log(response.data, 'response');
          const pdfUrl = window.URL.createObjectURL(
            new Blob(binaryData, { type: 'application/pdf' }),
          );
          window.open(pdfUrl);
        });
      });
    },