js-xlsxセルスタイルの使い方-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js-xlsxセルスタイルの使い方

php中世界最好的语言

Mar 12, 2018 pm 03:05 PM

javascript 細胞

今回はjs-xlsxのセルスタイルの使い方と、js-xlsxのセルスタイルを使用する際の注意点を紹介します。

xlsx-styleをダウンロード

npm install xlsx-style

xlsx-styleコアモジュールはインストールパスにありますnode_modulesxlsx-styledist

2. サンプルコード

ファイルxlsx.full.min.jsをコピーします

書き込みますサンプルコード:

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>示例</title></head><body>
    <script src="./xlsx.full.min.js"></script>
    <script>
        function saveAs(obj, fileName) {            var tmpa = document.createElement("a");
            tmpa.download = fileName || "下载";
            tmpa.href = URL.createObjectURL(obj);
            tmpa.click();
            setTimeout(function () {
                URL.revokeObjectURL(obj);
            }, 100);
        }        var jsono = [{            "id": 1, "合并的列头1": "数据11", "合并的列头2": "数据12", "合并的列头3": "数据13", "合并的列头4": "数据14",
        }, {            "id": 2, "合并的列头1": "数据21", "合并的列头2": "数据22", "合并的列头3": "数据23", "合并的列头4": "数据24",
        }];        const wopts = { bookType: &#39;xlsx&#39;, bookSST: true, type: &#39;binary&#39;, cellStyles: true };        function downloadExl(json, type) {            var tmpdata = json[0];
            json.unshift({});            var keyMap = []; //获取keys
            for (var k in tmpdata) {
                keyMap.push(k);
                json[0][k] = k;
            }            var tmpdata = [];//用来保存转换好的json 
            json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {                v: v[k],                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {                v: v.v
            });            var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
            tmpdata["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };//<====设置xlsx单元格样式
            tmpdata["!merges"] = [{                s: { c: 1, r: 0 },                e: { c: 4, r: 0 }
            }];//<====合并单元格 
            var tmpWB = {                SheetNames: [&#39;mySheet&#39;], //保存的表标题
                Sheets: {                    &#39;mySheet&#39;: Object.assign({},
                        tmpdata, //内容
                        {                            &#39;!ref&#39;: outputPos[0] + &#39;:&#39; + outputPos[outputPos.length - 1] //设置填充区域
                        })
                }
            };
            tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
                { bookType: (type == undefined ? &#39;xlsx&#39; : type), bookSST: false, type: &#39;binary&#39; }//这里的数据是用来定义导出的格式类型
            ))], {                    type: ""
                });
            saveAs(tmpDown, "这里是下载的文件名" + &#39;.&#39; + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
        }        function getCharCol(n) {            let temCol = &#39;&#39;,
                s = &#39;&#39;,
                m = 0
            while (n > 0) {
                m = n % 26 + 1
                s = String.fromCharCode(m + 64) + s
                n = (n - m) / 26
            }            return s
        }        function s2ab(s) {            if (typeof ArrayBuffer !== &#39;undefined&#39;) {                var buf = new ArrayBuffer(s.length);                var view = new Uint8Array(buf);                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;                return buf;
            } else {                var buf = new Array(s.length);                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;                return buf;
            }
        }    </script>
    <button onclick="downloadExl(jsono)">导出</button></body></html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

Canvas を使って便利な落書きボードを作成する方法

s-xlsx を使用して Excel ファイルをインポートおよびエクスポートする方法 (パート 2)

以上がjs-xlsxセルスタイルの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1672

CakePHP チュートリアル

1428

Laravel チュートリアル

1332

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

Excel が先頭のゼロを削除しないようにする方法 Feb 29, 2024 am 10:00 AM

Excel ブックから先頭のゼロを自動的に削除するのはイライラしますか?セルに数値を入力すると、Excel では数値の前の先頭のゼロが削除されることがよくあります。デフォルトでは、明示的な書式設定が欠如しているセルエントリは数値として処理されます。一般に、先頭のゼロは数値形式では無関係であるとみなされ、省略されます。さらに、先行ゼロは特定の数値演算で問題を引き起こす可能性があります。したがって、ゼロは自動的に削除されます。この記事では、口座番号、郵便番号、電話番号などの入力された数値データが正しい形式であることを確認するために、Excel で先頭のゼロを保持する方法を説明します。 Excel で、数値の前にゼロを付けるにはどうすればよいですか? Excel ブック内の数値の先頭のゼロを保持できます。いくつかの方法から選択できます。セルを設定するには、

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

WPS は 1 つのセルを 2 つに分割します Mar 20, 2024 pm 06:00 PM

WPS ソフトウェアは、テキストやドキュメントの処理に不可欠なヘルパーです。実際のアプリケーションでは、テキストやドキュメントを処理するためにセル内で操作する必要があることがよくあります。セルに関する知識は豊富です。今回はWPSでセルを2つに分割する具体的な手順を紹介します。 1. まず、編集する必要がある WPS テーブルを開き、2 つのセルに分割する必要があるセルドキュメントを選択します。 2. データ内の「列」をクリックして開きます。 3. ポップアップウィンドウで「固定幅」を選択し、「次へ」をクリックします。 4. ポップアップウィンドウで、列を分割する場所をクリックし、Enter キーを押して確定します。 1 つの例から推測してください。3 に変更する必要がある場合は、数値も 3 に変更できます。 5. 次に、[完了] をクリックします。 6. 別の方法もあります

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

Excelで複数のワークシートのセルを合計する方法 Feb 19, 2024 pm 01:57 PM

この記事では、Excel で複数のワークシートのセルを合計する方法を説明します。 Microsoft Excel は、データ管理に使用される強力なスプレッドシートプログラムです。データを操作する場合、複数のセルの合計を計算する必要がある場合があります。このガイドでは、これを簡単に実現する方法を説明します。 Excel で複数のワークシートのセルを合計する方法 Excel で複数のワークシートのセルを合計する場合、次の 2 つの状況が発生する可能性があります: セル範囲に単一のセル値を追加する値を追加するここでは両方の方法について説明します。 Excel の複数のワークシートにまたがる 1 つのセルの値を追加する 6 つの異なる企業の連続 4 か月 (1 月から 4 月) の売上高を含むサンプル数値を収集しました。

See all articles

js-xlsxセルスタイルの使い方

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック