1. excel preview
Method 1: Use xlsx plug-in
①Introduce xlsx
npm install xlsx
Page reference dependency
import * as XLSX from 'xlsx'
Using this kind of reference can solve the problem of version inconsistency in the import method of import XLSX from ‘xlsx’.
②Code
View excel sheet
Get the contents of the table
//Call event
clickView(val) {
this.excelURL = val.tablebudget;
this.readWorkbookFromRemoteFile(this.excelURL);
},
//View excel files online
readWorkbookFromRemoteFile(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" });
var sheetNames = workbook.SheetNames; // Collection of worksheet names
_this.workbook = workbook;
_this.getTable(sheetNames[0]);
}
};
xhr.send();
},
getTable(sheetName) {
var worksheet = this.workbook.Sheets[sheetName];
this.excelData = XLSX.utils.sheet_to_json(worksheet);
console.log(2222, this.excelData);
this.oopen = true;
},
Get the contents of the table
Regenerate excel table
<el-dialog title="Preview" append-to-body :visible.sync="oopen">
<el-table
:data="excelData"
border
stripe
:header-cell-style="{ background: '#F5F4F7' }"
>
<el-table-column
type="index"
label="serial number"
width="60"
:resizable="false"
align="center"
/>
<el-table-column
v-for="(value, key, index) in excelData[0]"
:key="index"
:prop="key"
:label="key"
/>
</el-table>
</el-dialog>
This is a regenerated table
I used a local excel table for this code and it was successful, but you can see that only the contents of the first sheet were fetched from the data in the table, and the contents of other tables were not fetched.
You can use this method if the Excel table you are using only has one sheet, but I feel that Excel in daily use scenarios should integrate several tables, which can be used, but there are limitations. There should be a solution, but I didn’t try it.
Method 2: 1. Use the iframe component and Microsoft’s official preview address
2. Use XDOC document preview service
1. Use iframe component and Microsoft’s official preview address
Pop-ups
<el-dialog
:close-on-click-modal="true"
title="File Preview"
type="primary"
:visible.sync="previewDialog"
width="80%"
left
>
<iframe
:src="attachmentSrc"
frameborder="0"
width="100%"
height="800"
></iframe>
<div slot="footer" class="dialog-footer">
<el-button type="primary" v-on:click="previewDialog = false"
>Close</el-button
>
</div>
</el-dialog>
method
clickView(val) {
this.attachment = val.tablebudget;
console.log("this.attachment :>> ", this.attachment);
this.previewFile(this.attachment);
},
previewFile(attachment) {
// Display preview content based on file format
const fileExtension = attachment.split(".").pop().toLowerCase();
console.log("object :>> ", fileExtension);
if (fileExtension === "xlsx" || fileExtension === "docx") {
this.attachmentSrc =
"https://view.officeapps.live.com/op/view.aspx?src=" + attachment;
console.log("this.attachmentSrc :>> ", this.attachmentSrc);
} else {
this.attachmentSrc = attachment;
}
this.previewDialog = true;
},
Get file type
const fileExtension = attachment.split(".").pop().toLowerCase();
When it is an xlsx file or docx file,
Microsoft resolution address: https://view.officeapps.live.com/op/view.aspx?src= The file address to be previewed
Just open pdf or txt directly
File preview
Use https://view.officeapps.live.com/op/view.aspx?src= followed by the file address to open it directly in the browser. Google, 360, Sohu, and Edge all support it.
The problem is that:
1. Domain name address must be used, IP address is not supported
2. The file name cannot contain Chinese characters and must be processed.
3. The file is downloadable
2. Use XDOC document preview service (XDOC document preview service)
Using the XDOC document preview service is the same as using Microsoft to resolve addresses, except that the previous addresses are different.
https://view.xdocin.com/view?src= The file address to be previewed
clickView(val) {
this.attachment = val.tablebudget;
console.log("this.attachment :>> ", this.attachment);
this.previewFile(this.attachment);
},
previewFile(attachment) {
// XDOC document preview service
this.attachmentSrc = "https://view.xdocin.com/view?src=" + attachment;
this.previewDialog = true;
},
Pop-ups
<el-dialog
:close-on-click-modal="true"
title="File Preview"
type="primary"
:visible.sync="previewDialog"
width="80%"
left
>
<iframe
:src="attachmentSrc"
frameborder="0"
width="100%"
height="800"
></iframe>
<div slot="footer" class="dialog-footer">
<el-button type="primary" v-on:click="previewDialog = false"
>Close</el-button
>
</div>
</el-dialog>
open situation
excel
word
This method is really good. It supports various formats. There is no requirement for the address of the file or the name of the file. It is very practical. (I was still passed, and I am worried about later support and whether there will be any charges)
Method 3: Use vue-office component
Install plugin
npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi
//docx document preview component npm install @vue-office/docx vue-demi //excel document preview component npm install @vue-office/excel vue-demi //pdf document preview component npm install @vue-office/pdf vue-demi
The version of vue is 2.6 and needs to be installed.
@vue/composition-api
The function I made yesterday was later made into a component. I will put the code of the component here.
The method inside is that the parent component passes the uuid of the file, accepts the uuid in the component, calls the interface, gets the path of the file, obtains the file format, and determines the calling interface through the file format.
Accepting the file ID and obtaining the path through the ID adjustment interface is not required. I need to use it this way. For reference, this part can be removed for normal use.
<template>
<div class="app-container-temp">
<div style="width: 100%; height: 840px; overflow: hidden">
<vue-office-docx
v-if="isdocx"
:src="url"
@rendered="rendered"
style="width: 100%; height: 100%"
/>
<vue-office-excel
v-if="isexcel"
:src="url"
@rendered="rendered"
style="width: 100%; height: 100%"
/>
<vue-office-pdf
v-if="ispdf"
:src="url"
@rendered="rendered"
style="width: 100%; height: 100%"
/>
</div>
</div>
</template>
<script>
//Introduce VueOfficeDocx component
import VueOfficeDocx from "@vue-office/docx";
//Introduce related styles
import "@vue-office/docx/lib/index.css";
//Introduce VueOfficeExcel component
import VueOfficeExcel from "@vue-office/excel";
//Introduce related styles
import "@vue-office/excel/lib/index.css";
//Introduce VueOfficePdf component
import VueOfficePdf from "@vue-office/pdf";
import { getPathByIds } from "@/api/system/user";
export default {
components: {
VueOfficeDocx,
VueOfficeExcel,
VueOfficePdf,
},
props: {
// file uuid
fileUuid: {
type: String,
},
},
data() {
return {
url: "",
isdocx: false,
isexcel: false,
ispdf: false,
};
},
mounted() {
console.log("this.fileUuid00000 :>> ", this.fileUuid);
var _this = this;
this.url = "";
if (this.fileUuid & amp; & amp; this.fileUuid != "") {
const list = [this.fileUuid];
getPathByIds(list).then((res) => {
if (res.data.length) {
this.url = res.data[0].filePath;
this.previewFile(this.url);
}
});
}
},
methods: {
rendered() {
console.log("Rendering completed");
},
previewFile(url) {
// Display preview content based on file format
const fileExtension = url.split(".").pop().toLowerCase();
if (fileExtension === "xlsx") {
this.isexcel = true;
}
if (fileExtension === "docx") {
this.isdocx = true;
}
if (fileExtension === "pdf" || "PDF") {
this.ispdf = true;
}
},
},
};
</script>
<style scoped lang="scss"></style>
Parent component pop-up window
<el-dialog
title="Preview"
append-to-body
:visible.sync="oopen"
modal-append-to-body
:width="'1200px'"
>
<Preview :fileUuid="fileUuid" v-if="oopen"> </Preview>
</el-dialog>
clickView(val) {
this.fileUuid = "";
this.fileUuid = val.tablebudget;
console.log('this.fileUuid :>> ', this.fileUuid);
this.oopen = true;
},
If it is used in many places, remember to remember the global reference in man.js
achieve effect
excel (I just tried the xls file format and it should not work. When I opened it, it was blank)
word
I finally finished writing it, I hope it can be of some reference to those who need it.