polaris-excel-viewer
TypeScript icon, indicating that this package has built-in type declarations

1.4.4 • Public • Published

excel-viewer

excel-viewer blog

这是一个excel文件查看器,支持xls、xlsx、csv格式,你可以用它在指定DOM渲染excel,也可以将它内嵌在iframe中。

This is an excel file viewer that supports xls, xlsx, csv and ods. You can use it to render excel in the specified DOM or embedded it in the iframe.

中文文档

Introduction

This 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.

image-readme-theme-light

image-readme-theme-dark

Usage

new ExcelViewer(el:string|HTMLElement, source:string|Buffer, options)

  • el:excel view container.
    • string:excel view element selector string.
    • HTMLElement:html element
  • source:excel source url or data.
    • string:excel file source url.
    • Buffer:excel file source buffer data.
  • options:more functions.
new ExcelViewer("#excel-view", "http://example.com/test.xls", {
    theme: "dark",
    lang: "zh_cn"
});

options

option type description
theme "light""dark" excel theme mode. default"light"
themeBtn boolean enable theme mode switch button. defaulttrue
lang "en""zh_cn" viewer language. default"en"
  • supports language
lang description
"en" English
"zh_cn" 简体中文(Simplified Chinese)

iframe

<iframe src="https://unpkg.com/excel-viewer@1.0.0/dist/index.html?file=http://example.com/test.xls"></iframe>
  • query params
params description
file excel file url.
theme? excel viewer theme mode. supports:lightdark
themeBtn? enable viewer theme switch button. supports:1 (true)、0 (disabled)
lang? viewer language. supports:enzh_cn

CDN

<link rel="stylesheet" href="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xspreadsheet.css">
<script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xspreadsheet.js"></script>
<script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel/xlsx.full.min.js"></script>
<script src="https://unpkg.com/excel-viewer@1.0.0/dist/excel-viewer.js"></script>
<script>
    new ExcelViewer("#excel-view", "http://example.com/test.xls", {
        theme: "dark",
        lang: "zh_cn"
    });
</script>

ESM

import ExcelViewer from "excel-viewer";

new ExcelViewer("#excel-view", "http://example.com/test.xls", {
    theme: "dark",
    lang: "zh_cn"
});

Authorization

If 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/excel-viewer@1.0.0/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 Restrictions

If 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>

Readme

Keywords

Package Sidebar

Install

npm i polaris-excel-viewer

Homepage

yesifang.com

Weekly Downloads

6

Version

1.4.4

License

MIT

Unpacked Size

1.65 MB

Total Files

16

Last publish

Collaborators

  • startable