在线预览docx 和 excel

最新推荐文章于 2024-08-01 16:00:38 发布

三155

最新推荐文章于 2024-08-01 16:00:38 发布

阅读量286

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/beloved_jodie/article/details/123151760

版权

在线预览docx 和 excel

预览docx

npm i jszip
npm i docx-preview

<template>
	<div >
		<div ref="file"></div>
	</div>
</template>
<script>
import axios from 'axios'
const docx = require('docx-preview');
window.JSZip = require('jszip')
export default {
  mounted(){
    axios({
      method: 'get',
      responseType: 'blob', // 设置响应文件格式
      url: '/docx',
    }).then(({res}) => {
      docx.renderAsync(res.data,this.$refs.file) // 渲染到页面预览
    })
  }
}
</script>

后端返回数据格式

预览excel

npm i xlsx

<template>
  <div>
    <div v-html="excel"></div>
  </div>
</template>
<script>
import axios from 'axios'
const XLSX = require('xlsx');
export default {
  data(){
    return {
      excel: null,
    }
  },
  mounted(){
     axios.get('/xlsx',{
       responseType: "arraybuffer", // 设置响应体类型为arraybuffer
     }).then(({res})=> {
       let workbook = XLSX.read(new Uint8Array(res.data), {type:"array"}); // 解析数据
       var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
       this.excel= XLSX.utils.sheet_to_html(worksheet); // 渲染
     })
  }
}
</script>