品牌网站要这么做,义乌外贸网站开发,陕西专业网站建设,做淘宝客网站要注意什么一、vue中预览word、excel、pdf#xff1a;
vue-office
vue-office支持多种文件(docx、excel、pdf)预览的vue组件库#xff0c;支持vue2/3#xff0c;也支持非Vue框架的预览。
特点#xff1a;
一站式#xff1a;提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线…一、vue中预览word、excel、pdf
vue-office
vue-office支持多种文件(docx、excel、pdf)预览的vue组件库支持vue2/3也支持非Vue框架的预览。
特点
一站式提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线预览
简单只需提供文档的src(网络地址、本地地址)即可完成文档预览
体验好选择每个文档的最佳预览方案保证用户体验和性能都达到最佳状态
性能好针对数据量较大做了优化
安装
#docx文档预览
npm install vue-office/docx#excel文档预览
npm install vue-office/excel#pdf文档预览
npm install vue-office/pdf
如果是vue2.6版本或以下还需要额外安装 vue/composition-api
npm install vue/composition-api
使用例子
文档预览场景大致分为两种
1.网络地址/本地项目地址比如 https://***.pdf
2.文件上传时预览可以通过获取文件的ArrayBuffer或Blob
pdf文件预览
使用网络地址/本地项目地址
templatedivvue-office-pdf:srcpdfUrlstyleheight: 100vhrenderedrenderedHandlererrorerrorHandler//div
/templatescript
import VueOfficePdf from vue-office/pdf;
import vue-office/docx/lib/index.css;
export default {name: PdfView,components: {VueOfficePdf,},data() {return {pdfUrl: http://localhost:3000/test.pdf,};},mounted() {},methods: {renderedHandler() {console.log(渲染完成);},errorHandler() {console.log(渲染失败);},},
};
/script
style scoped
/style
