js-preview前端预览文件

npm i @js-preview/docx

<!--
*@PreviewDocx.vue
*@author JIANG L docx文件预览
-->
<template>
    <div id="docx" style="height: 500px;"></div>
</template>

<script setup>
import {  ref,onMounted } from "vue";
import jsPreviewDocx from "@js-preview/docx";
import "@js-preview/docx/lib/index.css";

const excel = ref("http://。。。.docx");
onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
    const myExcelPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
    myExcelPreviewer.preview(excel).then(res=>{
        console.log('预览完成');
    }).catch(e=>{
        console.log('预览失败', e);
    });
});
</script>

<style scoped>

</style>

npm i @js-preview/excel

<!--
*@PreviewExcel
*@author JIANG L excel文件预览
-->
<template>
    <div id="excel" style="height: 500px;"></div>

</template>

<script setup>
import {  ref,onMounted } from "vue";
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';

const excel = ref("http://。。。.xlsx");
onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
    const myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
    myExcelPreviewer.preview(excel).then(res=>{
        console.log('预览完成');
    }).catch(e=>{
        console.log('预览失败', e);
    });
});

</script>

<style scoped>

</style>

注：只能实现xlsx与docx文件的预览

参考：纯js实现docx、xlsx、pdf文件预览库，使用超简单今年年初review同事代码时，看到同事在做一个文档预览的功能 - 掘金 (juejin.cn)