记录UMI框架下文件预览的问题

发布时间 2023-04-11 16:07:03作者: 天官赐福·

1.要想文件预览需要用到file-loader配置  方法:在config文件夹下的config.js文件中添加代码

// UMI框架下使用的webpack配置
  chainWebpack(config) {
    config.module
      .rule()
      .test(/\.(pdf|svg|docx|doc)$/) //正则校验文件后缀名
      .use('file-loader?name=[path][name].[ext]')
      .loader('file-loader') //使用file-loader处理文件类型
      .end()
  }

2.使用embed标签可以预览pdf

import viewPdf from './view.pdf';    
<embed
   src={viewPdf}
   type="application/pdf"
   style={{ width: '80vw', height: '100vh' }}
 />