支付宝网站开发文档,磁力珠,有帮人做网站的人吗,中国企业500强榜单20231.ifream
iframe src /iframe
注: src里面是文件地址
2.vue-office 支持vue2和vue3提供docx、.xlsx、pdf多种文档的在线预览方案 2.1安装
#docx文档预览组件
npm install vue-office/docx vue-demi#excel文档预览组件
npm install vue-office…1.ifream
iframe src /iframe
注: src里面是文件地址
2.vue-office 支持vue2和vue3提供docx、.xlsx、pdf多种文档的在线预览方案 2.1安装
#docx文档预览组件
npm install vue-office/docx vue-demi#excel文档预览组件
npm install vue-office/excel vue-demi#pdf文档预览组件
npm install vue-office/pdf vue-demi
如果是vue2.6版本或以下还需要额外安装 vue/composition-api
npm install vue/composition-api
代码(与ifrem用法类似)
doc:目前只支持docx文件预览不支持doc文件
excil:目前只支持xlsx文件预览不支持xls文件
pdf:无
注:doc,excil,pdf代码基本一致(以docx为例)
templatevue-office-docx:srcdocxstyleheight: 100vh;renderedrenderedHandlererrorerrorHandler/
/templatescript
//引入VueOfficeDocx组件
import VueOfficeDocx from vue-office/docx
//引入相关样式
import vue-office/docx/lib/index.cssexport default {components: {VueOfficeDocx},data() {return {docx: //设置文档网络地址可以是相对地址}},methods: {renderedHandler() {console.log(渲染完成)},errorHandler() {console.log(渲染失败)}}
}
/script
上传文件预览: 如果是原生的input typefile也是类似的
templatediv iddocx-demoel-upload:limit1:file-listfileListaccept.docx:beforeUploadbeforeUploadactionel-button sizesmall typewarning点击上传/el-button/el-uploadvue-office-docx :srcsrc//div
/templatescript
import VueOfficeDocx from vue-office/docx
import vue-office/docx/lib/index.cssexport default {components: {VueOfficeDocx},data() {return {src: ,fileList: []}},methods: {//在beforeUpload中读取文件内容beforeUpload(file) {let reader new FileReader();reader.readAsArrayBuffer(file);reader.onload (loadEvent) {let arrayBuffer loadEvent.target.result;this.src arrayBuffer};return false}}
}
/script
