纯js实现docx、xlsx、pdf文件预览库,使用超简单

2,956 阅读2分钟

今年年初review同事代码时,看到同事在做一个文档预览的功能,需要预览docx、xlsx、pdf文件,本来想着这都2023年了,应该是很成熟的功能,没想到代码却很复杂,于是萌生了做一个最简单的预览组件,经过一通捣鼓,站在前人的预览库基础上,做出了一套Vue文档预览组件vue-office,使用非常简单,传递一个src即可完成文档预览。

以docx文档预览为例,看看这个组件使用是不是超简单。

<template>
  <vue-office-docx :src="docx" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

相比前人的预览库,使用上简化了很多,让小白用户都能很快完成office文档的预览,也因此在短短7个月的时间收获了 700+ star。

这个库使用很简单,但是只能用在Vue项目中,而且由于考虑兼容Vue2和Vue3,还会在一些版本中出现一些打包问题,不是很好解决,于是经过周末再一通捣鼓,在原来的基础上开发出了一个js版本的预览库:js-preview,还是坚持之前的原则,使用一定要简单,要对小白用户友好,同时考虑各种使用场景(包括对ts的支持),来看下这个是不是你想要的。

docx文件预览

  • 安装依赖库
# docx文件预览库
npm i @js-preview/docx
  • 预览
import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'

//初始化时指明要挂载的父元素Dom节点
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));

//传递要预览的文件地址即可
myDocxPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx').then(res=>{
    console.log('预览完成');
}).catch(e=>{
    console.log('预览失败', e);
})

excel文件预览

  • 安装依赖库
# docx文件预览库
npm i @js-preview/excel
  • 预览
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';

const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
myExcelPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx').then(res=>{
    console.log('预览完成');
}).catch(e=>{
    console.log('预览失败', e);
})

pdf文件预览

  • 安装依赖库
# docx文件预览库
npm i @js-preview/pdf
  • 预览
import jsPreviewPdf from "@js-preview/pdf";

const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'));
myPdfPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf').then(res=>{
    console.log('预览完成');
}).catch(e=>{
    console.log('预览失败', e);
})

总结

可以看出,三个库采用同一套API,首先进行init初始化,传递预览要挂载的Dom,init返回文件预览对象,通过调用文件预览对象的preview方法,传递要预览的文档地址,preview方法返回Promise,可监听预览成功还是失败。

preview不仅支持接收文档地址,也支持接收文件ArrayBuffer格式数据,这样可以在一些上传场景进行预览。

这样进行文档预览是你想要的吗?如果有好的想法欢迎评论进行讨论。

如果能解决您的问题,麻烦各位大佬点个赞,为了这个项目真的是花费了好多个周末时间~~ github.com/501351981/v…