免费照片的网站模板,wordpress上传附件,文化网站源码,手机搭建电脑做的网站在此#xff0c;我只使用了docx和excel#xff0c; pdf我直接使用的iframe进行的展示就不作赘述了
//docx文档预览组件
npm install vue-office/docx//excel文档预览组件
npm install vue-office/excel//pdf文档预览组件
npm install vue-office/pdf如果是vue2.6版本或以下还…在此我只使用了docx和excel pdf我直接使用的iframe进行的展示就不作赘述了
//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/templatedivinputidfilereffilestypefilechangechangeHandlemultiplemultiple/!-- accept.doc,.docx,.pdf,.ai,.psd,.xlsx,.xls --!-- vue-office-docx :srcsrc renderedrenderingCompleted / --vue-office-excelstyleflex: 1; height: 0v-showsrc:srcsrcrenderedrenderingCompleted//div
/templatescript
//引入VueOfficeDocx组件
import VueOfficeDocx from vue-office/docx;
//引入相关样式
import vue-office/docx/lib/index.css
import VueOfficeExcel from vue-office/excel;
import vue-office/excel/lib/index.css
export default {data() {return {src: ,};},components: {VueOfficeDocx,VueOfficeExcel,},mounted() {//赋值文档路径 此目录可以是http地址也可以是本地文件// const src ref(./src/assets/docx/test.docx);},methods: {// 获取文件 这里是使用的 vue3.0 语法changeHandle(event) {console.log(event.target.files[0]);const file event.target.files[0];let fileReader new FileReader();fileReader.readAsArrayBuffer(file);fileReader.onload () {this.src fileReader.result;};// const blob new Blob([file], { type: application/pdf;charsetutf-8 });// const blob new Blob([file], { type: file.type });// this.src window.URL.createObjectURL(blob); //这里是通过blob拿到urlconsole.log(src--, this.src);},renderingCompleted() {console.log(渲染完成);},},
};
/scriptstyle
/style参考 1、vue vue-office 实现多种文件(docx、excel、pdf)的预览 2、vue 预览word、excel、pdf文档 vue-officeVueOfficeDocx、VueOfficeExcel、VueOfficePdf 3、vue 实现 word/excel/ppt/pdf 等文件格式预览操作 4、npm官网解释vue-office
