预览图片
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, 默认值。如果指定,则将空单元格替换为默认值。如果未指定,则使用 nullXLSX.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)
// );
// }//不影响什么
}
});