预览 docx ,doc ,xls
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | npm install xlsx docx-preview --save <template> <div > <div v- if = "previewData.type == 'doc'" ref= "file" ></div> <div v- if = "previewData.type == 'xls'" v-html= "tableau" ></div> </div> </template> <script> import axios from 'axios' let docx = require( 'docx-preview' ); const XLSX = require( "xlsx" ) export default { name: "index" , props: { previewData: { default : { type: 'doc' , url: '' } }, }, data() { return { tableau: '' , pdfUrl: '' } }, created() { if ( this .previewData.url == '' ) { this .msgWarning( '文件路径为空' ) } else { switch ( this .previewData.type) { case 'doc' : axios({ method: 'get' , responseType: 'blob' , // 设置响应文件格式 url: this .previewData.url, }).then(({data}) => { docx.renderAsync(data, this .$refs.file) // 渲染到页面预览 }) break case 'xls' : axios.get( this .previewData.url,{ responseType: "arraybuffer" , // 设置响应体类型为arraybuffer }).then(({data})=> { let workbook = XLSX.read( new Uint8Array(data), {type: "array" }); // 解析数据 let worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表 this .tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染 }) } } }, methods: { } } </script> <style scoped> </style> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)