vue实现页面预览图片，doc,docx,excel,pdf,ofd

最新推荐文章于 2024-08-03 23:22:49 发布

干前端的小阳哥

最新推荐文章于 2024-08-03 23:22:49 发布

阅读量546

点赞数

文章标签： vue.js excel pdf

本文链接：https://blog.csdn.net/weixin_48447589/article/details/134551248

版权

预览图片

1.我用的是element-ui，所以直接用组件上的

<el-image :src="imgUrl" :preview-src-list="srcList"> </el-image>

2.调用后端接口拿到图片的文件流，然后转成url即可。

              this.type = 'image';
              let arr = Uint8Array.from(res.file);
              let blob = new Blob([arr], { type: res.fileType });
              const url = URL.createObjectURL(blob);
              this.imgUrl = url;
              this.srcList = [url];

预览doc,docx

1.下载预览插件docx-preview

yarn add docx-preview
npm i docx-preview

2.根据后端返回的数据流显示在页面上

        this.type = 'docx';
        this.timer = setTimeout(() => {
        let arr = Uint8Array.from(res.file);
        let blob = new Blob([arr], { type: res.fileType });
        let docx = require('docx-preview');
        docx.renderAsync(blob, this.$refs.file);
      }, 500);

预览excel

1.下载插件xlsx

yarn add xlsx
npm i xlsx

2.在需要显示的组件中引入xlsx

import * as XLSX from 'xlsx';

3.根据后端返回的二进制流利用xlsx显示在页面上（针对我的项目这样实现的，谨慎复制）

             this.type = 'xlsx';
              let arr = Uint8Array.from(res.file);
              const workbook = XLSX.read(arr, {
                type: 'array'
              });
              // 删除掉没有数据的sheet
              Object.values(workbook.Sheets).forEach((sheet, index) => {
                if (Object.keys(sheet).indexOf('!ref') === -1) {
                  delete workbook.Sheets[workbook.SheetNames[index]];
                }
              });
              this.tableToHtml(workbook);





 tableToHtml(workbook) {
      this.excelSheet = [];
      const sheetList = workbook.SheetNames.filter(v => v.indexOf('数据源') === -1);
      this.activeName = sheetList[0];
      sheetList.forEach(sheet => {
        const worksheet = workbook.Sheets[sheet];
        if (worksheet) {
          // 转换工作表为HTML表格
          let htmlData = XLSX.utils.sheet_to_html(worksheet);
          // 创建一个新的 DOM element 来承载这个 HTML
          let container = document.createElement('div');
          container.innerHTML = htmlData;
          // 找到所有的 table 元素并添加 border 和 cellpadding
          let tables = container.getElementsByTagName('table');
          for (let i = 0; i < tables.length; i++) {
            tables[i].setAttribute('border', '1px solid #ccc');
            tables[i].setAttribute('cellpadding', '0');
            tables[i].setAttribute('cellspacing', '0');
            tables[i].style.width = '100%';
            tables[i].style.height = 'auto';
            // 为每个 <td> 元素设置最小宽度
            let cells = tables[i].getElementsByTagName('td');
            for (let j = 0; j < cells.length; j++) {
              cells[j].style.minWidth = '20px'; // 你可以根据需要调整最小宽度
            }
            // 检查 <tr> 是否包含数据，并设置最小高度
            let rows = tables[i].getElementsByTagName('tr');
            for (let k = 0; k < rows.length; k++) {
              if (rows[k].textContent.trim() === '') {
                rows[k].style.height = '20px';
              }
            }
          }
          // 找到第一行 (tr) 并添加背景色
          let firstRow = container.querySelector('tr');
          if (firstRow) {
            firstRow.style.backgroundColor = '#b4c9e8';
            firstRow.style.textAlign = 'center';
          }
          // 现在 htmlData 包含修改后的 HTML
          htmlData = container.innerHTML;

          this.excelSheet.push({
            name: sheet,
            innerHTML: htmlData
          });
        } else {
          this.excelSheet.push({
            name: sheet,
            innerHTML: '暂无数据'
          });
        }
      });

4.XLSX.read(arr, {type: 'array'});其中type参数的取值

base64：以base64方式读取
binary：BinaryString格式（ byte n is data.charCodeAt(n) ）
string：UTF8编码的字符串
buffer：nodejs Buffer
array：Uint8Array，8位无符号数组
file：文件的路径（仅nodejs下支持）

5.解析workBook对象的方法

XLSX.utils.sheet_to_csv：生成CSV格式
XLSX.utils.sheet_to_txt：生成纯文本格式
XLSX.utils.sheet_to_html：生成HTML格式
XLSX.utils.sheet_to_json：输出JSON格式

6.其中一些参数配置可直接查看官网

XLSX.utils.sheet_to_json(worksheet, options)

将 Sheet 数据转换为 JSON 格式

worksheet：Object，Sheet 对象。

options：Object，配置对象。可选。常见的配置项包括：

header: array | number，指定表头的行号或行号组成的数组。如果不设置，则以第一行作为表头。
blankrows: boolean，是否保留空行。默认值为 false。
defval: any，默认值。如果指定，则将空单元格替换为默认值。如果未指定，则使用 null
XLSX.utils.sheet_to_json(worksheet, options)
bookType：表示导出文件的类型，默认为 "xlsx"。还可以设置为 "xls"（早期版本的Excel文件格式）。
sheetName：要导出的工作表的名称，默认为 "Sheet1"。
header：一个布尔值，表示是否包含表头。默认为 true。
footer：一个布尔值，表示是否包含页脚。默认为 false。
raw：一个布尔值，表示是否将数据以原始格式导出。默认为 false。
dateNF：用于格式化日期的一个字符串，默认为 "YYYY-MM-DD"（日-月-年）。
displayXLSXHeaders：一个布尔值，表示是否在导出的HTML中显示Excel文件的元数据（如文件名、工作表名称等）。默认为 false。
exportHiddenColumns 和 exportHiddenRows：一个布尔值，表示是否导出隐藏的列或行。默认为 false。
showSheetTabs：一个布尔值，表示是否在HTML中显示工作表标签。默认为 true。
outFile：一个字符串，表示导出文件的路径和名称。
orientation：一个字符串，表示页面方向，可以设置为 "portrait"（纵向）或 "landscape"（横向）。默认为 "portrait"。
forceLabels：一个布尔值，表示是否强制将所有数据转换为标签形式。默认为 false。

预览pdf

直接使用自带的iframe标签

<iframe :src="pdfurl" width="100%" height="100%" />




this.type = 'pdf';
this.pdfurl = this.convertUrl(res);

//转换url 注意分辨是什么类型转url
    convertUrl(res) {
      let arr = Uint8Array.from(res.file);
      let blob = new Blob([arr], { type: res.fileType });
      const url = URL.createObjectURL(blob);
      return url;
    }

预览ofd

1.下载ofd.js（也可以使用其他插件）

yarn add ofd.js
npm i ofd.js

2.在需要预览的组件中引入

import { parseOfdDocument, renderOfd } from 'ofd.js';

3.处理从后端后端的文件流

 <div v-if="type == 'ofd'" style="width: 100%">
        <div class="seal_img_div" id="content" style="width: 100%"></div>
      </div>


this.type = 'ofd';
              let that = this;
              let url = that.convertUrl(res);
              parseOfdDocument({
                ofd: url,
                success(res) {
                  console.log(res);
                  //输出ofd每页的div
                  let screenWidth = getWidth();
                  const divs = renderOfd(screenWidth, res[0]);
                  let contentDiv = document.getElementById('content');
                  contentDiv.innerHTML = '';
                  for (const div of divs) {
                    contentDiv.appendChild(div);
                  }
                  // for (let ele of document.getElementsByName('seal_img_div')) {
                  //   this.addEventOnSealDiv(
                  //     ele,
                  //     JSON.parse(ele.dataset.sesSignature),
                  //     JSON.parse(ele.dataset.signedInfo)
                  //   );
                  // }//不影响什么
                }
              });