excel文件预览

word文件预览

pdf文件预览

普通图片预览

一、查看word

引用mammoth.js

安装 npm install --save mammoth

引入import mammoth from “mammoth”;

1.页面

<div id="wordView" v-html="vHtml"/></div>

2.数据

data() {return {vHtml: "",wordURL:''  //文件地址，看你对应怎末获取、赋值};
},
created() {// 具体函数调用位置根据情况而定this.readExcelFromRemoteFile(this.wordURL);
}
methods：{// 在线查看word文件readExcelFromRemoteFile: function (url) {var vm = this;var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "arraybuffer";xhr.onload = function () {if (xhr.status == 200) {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }).then(function (resultObject) {vm.$nextTick(() => {// document.querySelector("#wordView").innerHTML =//   resultObject.value;vm.vHtml = resultObject.value;});});}};xhr.send();},
}

二、查看Excel

引用sheetjs

安装 npm install --save xlsx

引入import XLSX from “xlsx”;

1.页面

<!-- excel查看详情 --><div id="table" v-if="!isWord"><el-table :data="excelData" style="width: 100%"><el-table-columnv-for="(value, key, index) in excelData[2]":key="index":prop="key":label="key"></el-table-column></el-table></div>

2.数据

data() {return {excelData: [],workbook: {},excelURL: "", //文件地址，看你对应怎末获取、赋值};
},
created() {// 具体函数调用位置根据情况而定this.readWorkbookFromRemoteFile(this.wordURL);
}
methods：{// 在线查看excel文件readWorkbookFromRemoteFile: function (url) {var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "arraybuffer";let _this = this;xhr.onload = function (e) {if (xhr.status === 200) {var data = new Uint8Array(xhr.response);var workbook = XLSX.read(data, { type: "array" });console.log("workbook", workbook);var sheetNames = workbook.SheetNames; // 工作表名称集合_this.workbook = workbook;_this.getTable(sheetNames[0]);}};xhr.send();},getTable(sheetName) {console.log(sheetName);var worksheet = this.workbook.Sheets[sheetName];this.excelData = XLSX.utils.sheet_to_json(worksheet);console.log(this.excelData);},
}

写的项目

1.页面

<el-dialogtitle="预览"append-to-body:visible.sync="dialog.dialogVisible"><div :class="[checkClass]" class="check" /><div v-if="dialog.isPdf" v-loading="iframeLoading" class="pdfClass"><iframe:src="dialog.src"type="application/x-google-chrome-pdf"/></div><!-- <div v-else-if="dialog.isExcel" class="excelClass" v-html="excelHtml" /> --><div v-else-if="dialog.isExcel"><el-table:data="excelData"borderstripe:header-cell-style="{'background':'#F5F4F7'}"><el-table-columntype="index"label="序号"width="60":resizable="false"align="center"/><el-table-columnv-for="(value, key, index) in excelData[0]":key="index":prop="key":label="key"/></el-table></div><div v-else-if="dialog.isWord" class="wordClass" v-html="wordHtml" /><div v-else class="imgfile"><img:src="dialog.src"alt=""></div></el-dialog>

2.数据

<script>

import { uploadFile, downloadFileByUniq, downloadFileByFileNames, downloadFileByUniq2 } from '@/base/api/common/'

import XLSX from 'xlsx'

import mammoth from 'mammoth'

export default {

data() {

return {

excelHtml: '',

wordHtml: '',

excelData: [],

dialog: {

dialogVisible: false,

src: '',

isPdf: false,

isExcel: false,

isWord: false

},

}

methods: {

// 预览previewFn(item) {if (!(item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg') || item.url.includes('.bmp') || item.url.includes('.JPG') || item.url.includes('.PNG') || item.url.includes('.JPEG') || item.url.includes('.BMP') || item.url.includes('.pdf') || item.url.includes('.txt') || item.url.includes('.xls') || item.url.includes('.doc'))) {this.$message.error('文件类型不支持预览')return false}if (item.url.includes('.pdf') || item.url.includes('.txt')) {this.dialog.isPdf = truethis.dialog.isExcel = falsethis.dialog.isWord = falsethis.dialog.src = ''this.iframeLoading = truedownloadFileByUniq(encodeURIComponent(item.url)).then(res => {const blob = new Blob([res], { type: item.url.includes('.pdf') ? 'application/pdf;' : '' })const href = window.URL.createObjectURL(blob)this.dialog.src = href}).finally(() => {this.iframeLoading = false})} else if (item.url.includes('.xls')) {this.dialog.isExcel = truethis.dialog.isWord = falsethis.dialog.isPdf = falsedownloadFileByUniq2(encodeURIComponent(item.url)).then(data => {const workbook = XLSX.read(new Uint8Array(data), { type: 'array' }) // 解析数据var worksheet = workbook.Sheets[workbook.SheetNames[0]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表// this.excelHtml = XLSX.utils.sheet_to_html(worksheet) // 渲染成htmlconst sheet2JSONOpts = {/** Default value for null/undefined values */defval: ''// 给defval赋值为空的字符串,不然没值的这列就不显示}// 渲染成jsonthis.excelData = XLSX.utils.sheet_to_json(worksheet, sheet2JSONOpts)console.log(this.excelData)})} else if (item.url.includes('.doc')) {var vm = thisthis.dialog.isWord = truethis.dialog.isExcel = falsethis.dialog.isPdf = falsedownloadFileByUniq2(encodeURIComponent(item.url)).then(data => {mammoth.convertToHtml({ arrayBuffer: new Uint8Array(data) }).then(function(resultObject) {vm.$nextTick(() => {vm.wordHtml = resultObject.value})})})} else {this.dialog.isPdf = falsethis.dialog.isExcel = falsethis.dialog.isWord = falsethis.dialog.src = item.downloadUrl}this.dialog.dialogVisible = truethis.checkClass = 'check' + item.intinvoicestatus},}