安裝
//docx文檔預覽組件
npm install @vue-office/docx vue-demi//excel文檔預覽組件
npm install @vue-office/excel vue-demi//pdf文檔預覽組件
npm install @vue-office/pdf vue-demi
使用示例
- docx文檔的預覽
<template><vue-office-docx :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficeDocx組件
import VueOfficeDocx from '@vue-office/docx'
//引入相關樣式
import '@vue-office/docx/lib/index.css'export default {components:{VueOfficeDocx},data(){return {src: 'http://static.shanhuxueyuan.com/test6.docx' //設置文檔網絡地址，可以是相對地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
- excel文檔預覽
<template><vue-office-excel :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficeExcel組件
import VueOfficeExcel from '@vue-office/excel'
//引入相關樣式
import '@vue-office/excel/lib/index.css'export default {components:{VueOfficeExcel},data(){return {src: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//設置文檔地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
- pdf文檔預覽
<template><vue-office-pdf :src="src" @rendered="rendered"/>
</template><script>
//引入VueOfficePdf組件
import VueOfficePdf from '@vue-office/pdf'export default {components:{VueOfficePdf},data(){return {src: 'http://static.shanhuxueyuan.com/test.pdf' //設置文檔地址}},methods:{rendered(){console.log("渲染完成")}}
}
</script>
擴展
如果你想要更豐富的文件在線預覽功能，可以參考文件在線預覽項目
