我的项目的由来

最近我的项目中须要实现pdf和docx文件的预览性能，原本想着这应该是十分常见的需要，应该有很多现成的简略计划可用，搜寻了一圈发现，尽管有很多计划，然而用起来有一些问题：

  • 预览的成果参差不齐，有的预览成果很好，有的预览短少对款式的反对
  • 应用简单，原本想着只有传一个文件地址就能预览，后果发现还要写很多细节代码
  • 每种文件都有很多计划须要去抉择，比方docx、pdf、excel等，每个文件都有大量的第三方库，须要去甄别测试

都2023年了，怎么文件预览还这么难！

发现了问题之后，就想着能不能实现一个简略的VUE组件库，可能解决以上问题，让老手前端，可能十分高效的实现文件预览工作。

于是，我冀望开发一个vue-office组件库，它必须满足以下3个要求

  • 应用肯定要简略，对老手要敌对，即传递一个文件地址，就可实现预览
  • 提供多种文件的一站式预览解决方案，解决常见的docx、excel、pdf三种文件的预览
  • 预览成果也好，不只是对内容预览，也要反对款式

要求明确了，实现就绝对简略了，从github上筛选每个文档最优的预览计划，而后封装成VUE组件，然而坑还是十分多的，文章最初一部分介绍。

应用

查看demo演示

github源码

装置

有三个组件，能够别离依据须要进行装置

//docx文档预览组件npm install @vue-office/docx//excel文档预览组件npm install @vue-office/excel//pdf文档预览组件npm install @vue-office/pdf

应用示例

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>

excel文档预览

<template>  <vue-office-excel :src="excel" @rendered="rendered"/></template><script>//引入VueOfficeExcel组件import VueOfficeExcel from '@vue-office/excel'//引入相干款式import '@vue-office/excel/lib/index.css'export default {  components:{    VueOfficeExcel  },  data(){    return {      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址    }  },  methods:{    rendered(){      console.log("渲染实现")    }  }}</script>

pdf文档预览

<template>  <vue-office-pdf :src="pdf" @rendered="rendered"/></template><script>//引入VueOfficePdf组件import VueOfficePdf from '@vue-office/pdf'export default {  components:{    VueOfficePdf  },  data(){    return {      pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址    }  },  methods:{    rendered(){      console.log("渲染实现")    }  }}</script>

存在的问题

最开始冀望公布一个npm包，然而因为多种文件预览要引入很多第三方库，导致最初的npm包超过了2M，无奈进行发包，
所以最初拆成了三个包，放到一个命名空间下 @vue-office，这种形式发包，须要在npm官网创立一个组织，创立组织是收费的，只有给个名称就行，也不须要资质审核。

拆包之后就又面临一个问题，如何进行多个包的治理呢，咱们常常会看到很多源码外面都有个packages的目录，要公布的包都在packages下，而后通过lerna来治理多个包的build和publish。

最重大的问题就是预览的款式问题，目前大部分的计划都只反对对内容的预览，然而不反对款式的预览，比方能够预览excel文件中的内容，然而像背景色、色彩、字体大小等都不反对，目前我反对了局部款式，这块仍需前面持续欠缺。

如果你也感兴趣，欢送一起奉献代码或者提供好的计划，期待大佬们给个赞反对一下~~

最大的感触就是，做一个可用的库，真不容易，要做好真难，须要大量的精力投入。

github源码