Method 1. Luckysheet preview
Luckysheet is an online spreadsheet similar to excel, powerful, easy to configure and completely open source.
Install Luckysheet
1. Import dependencies through CDN
Since Luckysheet has not released modular development yet, npm cannot be used, so we need to manually import relevant files into the VUE project. Edit the public/index.html file and add the following code in it
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
2. Specify the table container
<!-- 表格基本样式 -->
<template>
<div class="hello">
<div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
},
mounted() {
// 创建表格
window.luckysheet.create({
container: 'mysheet' // 设定表格容器的id
});
},
methods: {
}
}
</script>
3. Install Luckyexcel
Note: Luckyexcel can only read .xlsx format data, but cannot read .xls format data.
npm install luckyexcel
4. Complete code
- Note: If the xlsx file is created by wps, the embedded picture cannot be displayed normally, but a text like =DISPIMG("Picture 1(1)",1) will be displayed instead
. - Reason: The embedded picture inserted in the WPS form is in =DISPIMG format (a wps-specific function), it is not a vshape, it cannot be
found in the shapes collection, and the picture can only be seen by opening it with the et form of wps. - Solution: Right click on wps to switch to a floating picture
<template>
<div class="hello">
<div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div>
</div>
</template>
<script>
import LuckyExcel from 'luckyexcel'
export default {
name: 'about',
props: {
msg: String
},
data() {
},
mounted() {
// 创建表格
// window.luckysheet.create({
// container: 'mysheet' // 设定DOM容器的id
// });
// 加载 excel 文件
LuckyExcel.transformExcelToLuckyByUrl(
"http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/30/zG4ZPphpTiDPkG1653875854220530.xlsm",
"", (exportJson, luckysheetfile) => {
console.log(exportJson);
console.log(luckysheetfile);
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
alert("文件读取失败!");
return;
}
// 销毁原来的表格
window.luckysheet.destroy();
// 重新创建新表格
window.luckysheet.create({
container: 'mysheet', // 设定DOM容器的id
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showstatisticBar: false, // 是否显示底部计数栏
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 是否允许增加行
enableAddCol: false, // 是否允许增加列
sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: false, //返回头部按钮
data: exportJson.sheets, //表格内容
title: exportJson.info.name //表格标题
});
});
},
methods: {
}
}
</script>
Method 2. Office Web Viewer (Microsoft's development interface)
Open Word, PowerPoint or Excel files directly in your browser and convert download links to Office Web Viewer links for use on your website or blog Note: In SharePoint 2019,
insertable file types are limited to Word, Excel and PowerPoint (, .doc, .docx, .xls, .xlsx, .pot, .potx, .ppt, and .pptx).
advantage
- View Office files directly without Office
- Applicable to mobile terminal and PC
- View Vue preview word, excel, pptx, pdf files in the browser without downloading files
let docUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
let url = encodeURIComponent(docUrl)
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
// 在新窗口打开编码后 的链接
window.open(officeUrl,'_target')
Method 3, XDOC document preview cloud service (preview pdf, word, xls, ppt)
Advantages of XDOC document preview cloud service
注意：文档地址要用utf-8编码，并且外网可访问。
:
- You only need to pass in the document URL, and automatically identify the document format based on the content
- Efficient, fast, real-time preview, 0 millisecond response to repeated requests
- Use HTML5 to display content, and adapt to PC and mobile terminals at the same time
- Support PDF, OFD, DOC/X, XLS/X, PPT/X, JPG, MP4 and other document formats
call method
https://view.xdocin.com/view?src=文档地址
JS call:
https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx
JS call (with watermark):
window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx") + "&watermark=" + encodeURIComponent("view.xdocin.com"));
optional parameters
&pdf=true, the word document tries to display in pdf mode, the default is false
&watermark=watermark text, display text watermark; "img:"+image url indicates image watermark, such as: img:https://view.xdocin.com/demo/wm.png
&saveable=true, whether to allow saving source files, default false
&printable=false, whether to allow printing, the default is true
©able=false, whether to allow to choose to copy the content, the default is true
&toolbar=false, whether to display the bottom toolbar, default true
&title=Custom title
&expire=30, the validity period of the preview link, in minutes, the default is permanent
&limit=, limit the number of pages, such as: "5" means only displaying the first 5 pages, "2,5" means 5 pages starting from page 2, valid for pdf/doc/docx/ppt/pptx
&filename=filename, assists in identifying the document format
&fontsize=font size (unit px), default 14, range: 6~58
&mtime=File modification timestamp (eg: 1633093801, accurate to seconds) or modification time (eg: 2021-10-01 21:10:01), the value changes to refresh the cache