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

今年年初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…