合肥营销型网站,产品市场营销策划方案,智能建站网站,网站301的作用vue 文件预览 图片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml
最近公司要做一个类似电脑文件夹的功能#xff0c;支持文件夹操作#xff0c;文件操作,这里就不说文件夹操作了#xff0c;说说文件预览操作#xff0c;本人是后端java开发#xff0c;前端vue#…vue 文件预览 图片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml
最近公司要做一个类似电脑文件夹的功能支持文件夹操作文件操作,这里就不说文件夹操作了说说文件预览操作本人是后端java开发前端vue目前没有人就也由我来写直接上代码我的文件是上传到OSS上的预览远程文件的话需要配置好跨域
图片就简单了直接打开新的窗口
window.open(url,_blank)视频也是一样的直接打开新的窗口
window.open(url,_blank)docx
这里使用的是vue-office组件先安装依赖----------------------------------------#docx文档预览组件
npm install vue-office/docx vue-demi0.14.6
--------------------------------------------------------
页面中引入组件
//引入VueOfficeDocx组件
import VueOfficeDocx from vue-office/docx
//引入相关样式
import vue-office/docx/lib/index.cssscriptexport default {components:{VueOfficeDocx},
/script
templatevue-office-docxclassshow_office:srcdocxUrlstyleheight: 90vh;//template
excel
这里使用的是vue-office组件先安装依赖----------------------------------------#excel文档预览组件
npm install vue-office/excel vue-demi0.14.6--------------------------------------------------------
页面中引入组件//引入VueOfficeExcel组件
import VueOfficeExcel from vue-office/excel
//引入相关样式
import vue-office/excel/lib/index.cssscript
export default {components:{VueOfficeExcel},
/scripttemplatevue-office-excelclassshow_office:srcexcelUrlstyleheight: 90vh;/
/templatepdf
这里使用的是vue-office组件先安装依赖---------------------------------------#pdf文档预览组件
npm install vue-office/pdf vue-demi0.14.6
--------------------------------------------------------
页面中引入组件//引入VueOfficePdf组件
import VueOfficePdf from vue-office/pdfscript
export default {components:{VueOfficePdf},/script/templatevue-office-pdfclassshow_office:srcpdfUrlstyleheight: 90vh;/
/template txt、html
divstylewidth:100%;height: 90vh;v-htmltxtUrl/axios.get(url, { responseType: text }).then(response {// 根据设置的编码进行处理这里假定utf-8this.txtUrl response.data;})xml
axios.get(url, { responseType: text }).then(response {const parser new DOMParser();const xmlDoc parser.parseFromString(response.data, text/xml);this.parsedXML new XMLSerializer().serializeToString(xmlDoc.documentElement);})pre stylewidth:100%;height: 90vh;code{{ parsedXML }}/code/prepptx
这里使用的是PPTXjs 1.下载好的PPTXjs放到public目录下 2.修改PPYXjs的index.hhtml,获取实际文件地址 3 通过拼接地址请求PPYXjs实现预览操作
链接: https://blog.csdn.net/IAIPython/article/details/137677707 链接: https://github.com/501351981/vue-office
