首页 > 其他分享 >记录UMI框架下文件预览的问题

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

时间:2023-04-11 16:13:51浏览次数:57  
标签:预览 框架 UMI loader file pdf config

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' }}
 />

 

标签:预览,框架,UMI,loader,file,pdf,config
From: https://www.cnblogs.com/domin520Jian/p/17306542.html

相关文章

  • 【云享专刊】开源遇上华为云,OCP架构变身“云原生框架”
    摘要:华为云DTSE团队出品云原生改造指南,助力轻松实践OCP上云。本文分享自华为云社区《【云享专刊】开源遇上华为云,OCP架构变身“云原生框架”》,作者:华为云社区精选。OpenStack、Docker、K8S、Hadoop……这些都是开发者耳熟能详的开源技术。开源技术的应用,正不断推动新兴技术和产业......
  • go语言学习-gin框架路由
    表单参数表单参数传输为post请求,http常见的传输格式为四种application/jsonapplication/x-www-form-urlencodedapplication/xmlmultipart/form-data表单参数可以通过PostForm()方法获取,该方法默认解析的是x-www-form-urlencoded或from-data格式的参数<!DOCTYPEhtml><htmllang="e......
  • 【云享专刊】开源遇上华为云,OCP架构变身“云原生框架”
    摘要:华为云DTSE团队出品云原生改造指南,助力轻松实践OCP上云。本文分享自华为云社区《【云享专刊】开源遇上华为云,OCP架构变身“云原生框架”》,作者:华为云社区精选。OpenStack、Docker、K8S、Hadoop……这些都是开发者耳熟能详的开源技术。开源技术的应用,正不断推动新兴技术和......
  • Python 爬虫框架 looter
    我们常用的pyspider,scrapy就不多介绍了,今天咱们玩looter框架的爬虫,其实爬虫很有意思,看看下面的代码就秒懂。安装先安装好python3,需要3.6以上,然后执行pipinstalllooterλlooter-hLooter,apythonpackagedesignedforwebcrawlerlovers:)Author:alphardexQQ:258......
  • 高性能 Jsonpath 框架,Snack3 3.2.65 发布
    高性能Jsonpath框架,Snack33.2.65发布来源:投稿作者: 梅子酒好吃2023-04-1014:18:00 0Snack3,一个高性能的JsonPath框架借鉴了Javascript所有变量由var申明,及Xmldom一切都是Node的设计。其下一切数据都以ONode表示,ONode也即Onenode之意,代......
  • vue 预览PDF、Docx、EXCEL文件
      <template><divclass="contentArea"><divclass="fileContainer"ref="fileDiv"v-if="$route.query.fileName.indexOf('docx')!==-1"></div><divclass="f......
  • RDIF.vNext全新低代码快速开发框架平台发布
    1、平台介绍RDIF.vNext,全新低代码快速开发集成框架平台,给用户和开发者最佳的.Net框架平台方案,为企业快速构建跨平台、企业级的应用提供强大支持。RDIF.vNext的前身是RDIFramework框架,RDIF(RapiddevelopIntegrateFramework,vNext代表全新下一代),全新设计,全新开发,代码量减......
  • Android DataStore Proto框架存储接入AndroidStudio教程详解与使用
    一、介绍        通过前面的文字,我们已掌握了DataStore的存储,但是留下一个尾巴,那就是Proto的接入。Proto是什么?Protobuf,类似于json和xml,是一种序列化结构数据机制,可以用于数据通讯等场景,相对于xml而言更小,相对于json而言解析更快,支持多语言官网:LanguageGuide(proto3)|......
  • go语言学习-gin框架学习笔记-1
    gin是一个golang的微框架,封装比较优雅,api友好,源码注释比较明确,具有快速灵活,容错方便等特点,对于golang而言,web框架的依赖远要比python,java之类的要小,自身的net/http足够简单,性能也非常不错。安装goget-ugithub.com/gin-gonic/gin//安装import"github.com/gin-goinc/gin"//......
  • gin框架中间件
    前言:中间件middleware,也是一种处理器。主要用于在多个业务逻辑中间重用代码,例如认证校验,日志处理等。中间件需要附加在路由上,使用router.Use()方法 正文:gin.Default()初始化路由对象时,会随之附加两个中间件Logger和Recoverygin.New() 创建空白路由 没有任何中间......