乐趣区

关于前端:这可能是最简单的docxpdfexcel文件预览vue组件库

jiezi

我的项目的由来

最近我的项目中须要实现 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 源码

退出移动版