1.0.1 • Public • Published 4 months ago
中文文档 IntroductionThis is an excel file viewer developed using xlsx and xspreadsheet. Added light and dark theme mode switching, new support for Chinese, new support for iframe, so that you can use it right out of the box. Usage
new ExcelViewer("#excel-view", "http://example.com/test.xls", { theme: "dark", lang: "zh_cn" }); options
iframe<iframe src="https://unpkg.com//dist/index.html?file=http://example.com/test.xls"></iframe>
CDN<link rel="stylesheet" href="https://unpkg.com//dist/excel/xspreadsheet.css"> <script src="https://unpkg.com//dist/excel/xspreadsheet.js"></script> <script src="https://unpkg.com//dist/excel/xlsx.full.min.js"></script> <script src="https://unpkg.com//dist/excel-viewer.js"></script> <script> new ExcelViewer("#excel-view", "http://example.com/test.xls", { theme: "dark", lang: "zh_cn" }); </script> ESMimport ExcelViewer from "excel-viewer"; new ExcelViewer("#excel-view", "http://example.com/test.xls", { theme: "dark", lang: "zh_cn" }); AuthorizationIf your excel file needs authorization, you can help you through this. iframe<iframe id="excel-viewer"></iframe> <script> let iframe = document.getElementById("excel-viewer"); // example with axios axios({ url: "http://example.com/test.xls", method: "GET", headers: { "Authorization": "Your Authorization Token" }, // authorization token responseType: "blob" }).then(blob => { let localUrl = URL.createObjectURL(blob) + ".xls"; // add excel file suffix iframe.src = "https://unpkg.com//dist/index.html?file=" + localUrl; }) </script> CDN<div id="excel-view"></div> <script> // example with axios axios({ url: "http://example.com/test.xls", method: "GET", headers: { "Authorization": "Your Authorization Token" }, // authorization token responseType: "arraybuffer" }).then(res => { new ExcelViewer("#excel-view", res.data); }) </script> ESM<template> <div ref="excel-view"></div> </template> <script> import axios from "axios"; import ExcelViewer from "excel-viewer"; // example with vuejs and axios export default { mounted() { let container = this.$refs["excel-view"]; axios({ url: "http://example.com/test.xls", method: "GET", headers: { "Authorization": "Your Authorization Token" }, // authorization token responseType: "arraybuffer" }).then(res => { new ExcelViewer(container, res.data); }) } } </script> !!Known RestrictionsIf you need to use multiple excel-viewer on one page, the ESM method will not be able to set different theme modes for the previewer and cannot use the theme switching function. You can use the iframe embedded approach to solve this problem perfectly. <div id="excel-view1"></excel-view> <div id="excel-view2"></excel-view> <script> // right new ExcelViewer("#excel-view1", "http://example.com/test.xlsx", { theme: "dark", themeBtn: false }); new ExcelViewer("#excel-view2", "http://example.com/test.xlsx", { theme: "dark", themeBtn: false }); // error new ExcelViewer("#excel-view1", "http://example.com/test.xlsx", { theme: "dark", themeBtn: true }); // error,themeBtn should disabled new ExcelViewer("#excel-view2", "http://example.com/test.xlsx", { theme: "light", themeBtn: false }); // error, multiple viewer theme mode must be the same </script> |