前端显示pdf、ppt等文件

Question

前端：ant design vue
后端：egg.js
项目进度：现在文件能够通过前端上传至后端的public文件夹中
需求：在前端能够在线展示上传的pdf、ppt等文件

Answer 1

已自行解决，后端获取文件，再使用二进制数据流传到前端，前端再转换下进行展示
后端：

'use strict';
const Controller = require('egg').Controller;
const fs = require('fs');
const path = require('path');
class ReadpdfController extends Controller {
  async getPDFFile() {
    const { ctx } = this;
    const { sendURL } = ctx.request.body;
    try {
      const filePath = path.join('app/public/', sendURL)
      const fileData = await new Promise((resolve, reject) => {
        fs.readFile(filePath, (error, data) => {
          if (error) {
            reject(error)
          } else {
            resolve(data)
          }
        })
      })
      this.ctx.body = fileData
      this.ctx.type = 'application/pdf'
    } catch (error) {
      console.log(error);
      ctx.body = {
        errCode: 1,
        errMsg: '数据查询错误',
      };
    }
  }
}
module.exports = ReadpdfController;

前端：

axios.post('/api/readpdf/getPDFFile', { sendURL }, { responseType: 'blob' })
        .then(response => {
          // 获取PDF文件数据并存储在data中
          const blob = new Blob([response.data], { type: 'application/pdf' })
          const data = URL.createObjectURL(blob)
          console.log(data, 'data');
          // 打开PDF文件
          window.open(data, '_blank')
        })