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文件预览

• 安装依赖库

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文件预览

• 安装依赖库

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