vue 预览pdf/word/excel文件

最新推荐文章于 2024-07-10 00:09:20 发布

Naive_Jam

最新推荐文章于 2024-07-10 00:09:20 发布

阅读量714

点赞数

分类专栏： vue 文章标签： pdf word excel vue.js 前端

本文链接：https://blog.csdn.net/qq_58340302/article/details/130424923

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章介绍了在前端如何预览PDF、Word和Excel文件。对于PDF，使用iframe直接嵌套URL；预览Word则借助docx-preview插件，但不支持doc类型；预览Excel利用xlsx库将文件转换为HTML并设置样式。所有预览均要求后端提供文件URL。

摘要由CSDN通过智能技术生成

这里处理的都是，预览后端返回的文件地址url

1、预览pdf

直接使用iframe嵌套

<iframe v-if="url" :src="url" />

2、预览word

使用插件 docx-preview

"docx-preview": "^0.1.4"

npm install docx-preview

页面：

<div ref="file" />

Js：

import axios from 'axios'
let docx = require("docx-preview");

// ...
created(){
  readWordFromRemoteFile(this.url)
},
methods: {
  readWordFromRemoteFile(url){
     axios.request({
      method: "GET", 
      url,
      responseType: "blob",
    }).then(async(res) => {
      if (res) {
        // 这里需要的是blob
        docx.renderAsync(res.data, this.$refs.file);
      }
    }).catch((error) => {
      console.error(error);
    })
  },
}

备注：不支持doc类型的文件，word的预览还是建议后端做处理

3、预览excel

使用插件 xlsx

"xlsx": "^0.16.0"

npm install xlsx

页面：

<div id="excelView" v-html="excelView" />

Js：

// 引入
import XLSX from 'xlsx'
import axios from 'axios'  
// ...
data() {
  return {
    excelView: '',
  }
},
created(){
  readExcelFromRemoteFile(this.url)
},

methods: {
  /**
   * 预览excel
   */
  readExcelFromRemoteFile(url){
    axios.request({
      method: "GET", 
      url,
      responseType: "arraybuffer",
      }).then((res) => {  
          const workbook = XLSX.read(new Uint8Array(res.data), {
          type: "array",
        }); // 解析数据
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        this.excelView = XLSX.utils.sheet_to_html(worksheet); // 渲染
        this.$nextTick(function () {
          // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。
          this.setStyle4ExcelHtml();
        });
      }).catch((error) => {
        console.error(error);
        try {
          previewFile(url)
        } catch (error) {
          console.error(error);
          this.$refs.file.innerHTML = '该文件不支持预览，请下载查看!'
        }
      })
  },
  // 设置Excel转成HTML后的样式
  setStyle4ExcelHtml() {
    const excelViewDOM = document.getElementById("excelView");
    if (excelViewDOM) {
      const excelViewTDNodes = excelViewDOM.getElementsByTagName("td"); // 获取的是HTMLConnection
      if (excelViewTDNodes) {
        const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes);
        for (const i in excelViewTDArr) {
          const id = excelViewTDArr[i].id; // 默认生成的id格式为sjs-A1、sjs-A2......
          if (id) {
            const idNum = id.replace(/[^0-9]/gi, ""); // 提取id中的数字，即行号
            if (idNum && (idNum === "1" || idNum === 1)) {
              // 第一行标题行
              excelViewTDArr[i].classList.add("class4Title");
            }
            if (idNum && (idNum === "2" || idNum === 2)) {
              // 第二行表头行
              excelViewTDArr[i].classList.add("class4TableTh");
            }
          }
        }
      }
    }
  },
}

CSS：


/deep/ table tr td {
  border: 2px solid gray !important; 
  width: 300px !important;
  height: 33px !important;
}
/**整体样式 */
/deep/ .excel-view-container {
  background-color: #ffffff;
}
/**标题样式 */
/deep/ .class4Title {
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 10px !important;
}
/**表格表头样式 */
/deep/ .class4TableTh {
  /* font-size: 14px !important; */
  font-weight: bold !important;
  padding: 2px !important;
  background-color: #ccc !important;
}

在此记录，以便下次需要