Vue支持预览 docx格式,xlsx格式,pdf格式的文件

  • 如需要,请访问以下地址
  • docx-preview, luckyexcel 配置文件与node服务仓库地址

1 预览docx格式文档

配置文件存放位置
1.1 引入相关配置文件
  • docx预览会使用 docx-preview

  • 如果直接使用npm包,当解析时会出现如下错误

    效果图

  • 所以本次会改为直接把 docx-preview打包后的代码直接引入到入口文件里



  
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>
    
    
    
    
    
    

  
  
    
    
  • docx-previewgithub地址: https://github.com/VolodymyrBaydalka/docxjs
1.2 预览docx格式文件


 


  • 特别注意:返回值是用的 blob格式接收的,但只需要红框里的数据,如发现报错(描述具体为不是文件等等)麻烦打印下返回值跟此图对照,如还未解决麻烦评论区留言!
    注意点,下面的同理

    docx效果图

2 xlsx格式文件预览

  • xlsx预览会使用 luckyexcel

  • 如果直接使用npm包,当解析时会出现如下错误

    效果图

  • 所以本次会改为直接把 luckyexcel打包后的代码直接引入到入口文件里

2.1 引入相关配置文件


  
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>
    
    
    
    
    
    
    
    
    
  
  
    
    
  • luckyexcelgithub地址: https://github.com/dream-num/Luckyexcel
1.2 预览xlsx格式文件


 


xlsx效果图

2 pdf格式文件预览

  • 浏览器本身是支持pdf格式文件预览的,除非想在界面里内嵌一个区域。
1.1 下载所需配置包
  • 特别注意:vue-pdf需要文档的http地址
npm i vue-pdf
1.2 预览pdf格式文件


 


你可能感兴趣的:(Vue支持预览 docx格式,xlsx格式,pdf格式的文件)