预览页面pdf、docx、xlsx文件

最新推荐文章于 2024-07-23 08:30:44 发布

new code Boy

最新推荐文章于 2024-07-23 08:30:44 发布

阅读量185

点赞数

文章标签： pdf 前端 javascript

本文链接：https://blog.csdn.net/qq_46344419/article/details/128956468

版权

预览:pdf

<iframe
    id="iframe"
     :src="url"
     frameborder="0"
 ></iframe>

预览:docx
下载插件 npm i docx-preview --save
使用插件 import docx from "@docx-preview"
<div ref="file"></div>
axios({
       method: 'get',
       responseType: 'blob', // 设置响应文件格式
       url: this.url,
      }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
})

预览:xlxs
下载插件 npm i xlsx --save
使用插件 import XLSX from "@xlsx"
<div v-html="tableau"></div>
axios
.get(this.url, {
     responseType: '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) // 渲染到页面预览
 })