开源免费无广告，这款插件满足你常用格式的文件预览...

前段时间有需求就是需要接入在线编辑器，当然是买了第三方的。但是也有不少开源的可用。如果你只要预览功能的话，不妨试试这个！

先上演示

先上演示，如果觉得确实是自己的需求，再往下看。不然浪费时间折腾。

简单介绍

vue-office 是一个只有预览功能的插件，其中可以对docx、xlsx、pdf和pptx进行预览。直接集成了常用的四种格式，不用再一个个安装其他的很多插件了。能直接通过本地上传的方式预览，也能通过一个文件地址来进行预览。当然，也是支持vue2/3两种版本的。但是如果你是vue2的话，需要安装一个@vue/composition-api。如果你不是vue项目，也想用这个的话，也是支持的。

Vue项目使用

首先需要安装对应的依赖。

#docx文档预览组件
npm install @vue-office/docx vue-demi

#excel文档预览组件
npm install @vue-office/excel vue-demi

#pdf文档预览组件
npm install @vue-office/pdf vue-demi

#pptx文档预览组件
npm install @vue-office/pptx vue-demi

如果你都要使用的话，可以直接这样输入

npm install @vue-office/docx @vue-office/excel @vue-office/pdf @vue-office/pptx vue-demi

然后我们直接在项目中使用即可！下面是直接用了4个预览方式，上传不同的类型文件，直接切换显示不同的文件的数据。

<!-- pdf2word -->
<template>
  <div id="" class="h-full flex flex-col items-center">
    <div class="mb-4 mt-4 flex justify-start">
      <a-upload
        :auto-upload="false"
        :show-file-list="false"
        @change="handleChange"
      />
    </div>
    <div class="w-4/5" style="height: 90vh">
      <vue-office-docx :src="url" v-if="type == 'docx'"></vue-office-docx>
      <vue-office-excel :src="url" v-if="type == 'xlsx'"></vue-office-excel>
      <vue-office-pptx
        :src="url"
        v-if="type == 'pptx'"
        style="height: 100%"
      ></vue-office-pptx>
      <vue-office-pdf
        :src="url"
        v-if="type == 'pdf'"
        style="height: 100%"
      ></vue-office-pdf>
    </div>
  </div>
</template>

<script setup name="pdf2word">
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePptx from "@vue-office/pptx";
import VueOfficePdf from "@vue-office/pdf";
//引入相关样式
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";
import { nextTick, ref } from "vue";

const url = ref("");

const type = ref("docx");

// 绑定文件上传事件
const handleChange = (fileItem) => {
  type.value = "";
  url.value = "";
  const file = fileItem[fileItem.length - 1].file;
  const fileNameList = file.name.split(".");
  type.value = fileNameList[fileNameList.length - 1];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = (loadEvent) => {
    const arrayBuffer = loadEvent.target.result;
    url.value = arrayBuffer;
  };
  return false;
};
</script>

非Vue项目使用

可以安装以下依赖！

# docx文件预览库
npm i @js-preview/docx
# docx文件预览库
npm i @js-preview/excel
# docx文件预览库
npm i @js-preview/pdf

然后根据文件类型使用！

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);
})

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);
})

import jsPreviewPdf from "@js-preview/pdf";

const myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {
    onError: (e)=>{
        console.log('发生错误', e)
    },
    onRendered: ()=>{
        console.log('渲染完成')
    }
});
myPdfPreviewer.preview('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf');

但是这个似乎是没有做PPTX的预览支持，不过可以根据vue3的使用方式，自己再去封装一个即可。

问题

目前这个插件中，对于word和excel只支持docx和xlsx，而doc和xls暂不支持。如果你们常用是这两种格式的话，还是要慎重使用了，可以选择其他的开源文档编辑器。比如OnlyOffice或者LibreOffice等。

最后再推荐一下自己写的小工具：

在线思维导图：https://www.orangecj.cn/markmap

在线去水印：https://www.orangecj.cn/removeWatermark

短剧查询：https://www.orangecj.cn/duanju

json格式化：https://www.orangecj.cn/toJson

短链接生成：https://www.orangecj.cn/shortUrl