uniapp アプリから Excel をエクスポートする方法の検討と実装

序文

最近、uniappというExcelのエクスポート機能を持つアプリに出会ったので、ここにまとめておきます。

最終結果

アプリ側で Excel を生成し、いくつかのセルパラメーターを変更し (テキストは中央揃え、セルの種類はテキスト)、最後に .xlsx ファイルをアプリのドキュメントディレクトリにエクスポートします。

いくつかの問題

0.Blob または html

uniapp で Excel をエクスポートする場合、sheetjs + Blob が圧倒的で、その後、H5 で一度にダウンロードされます。アプリには BLOB オブジェクトがまったくありません。(ここでのもう 1 つの考えは、Blob オブジェクトを持つことができるように、アプリ側で Webview を使用することです。私はそれを試していませんが、実現可能なはずです。)

アプリでは、システム IO ストリームを使用して .xlsx ファイルを作成し、データを書き込む必要があります。次の HTML テンプレートを作成すると、Excel で開くことができます。

 let worksheet = "sheet1";
 let tableHtml= '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'
      // 循环遍历，每行加入tr标签，每个单元格加td标签
      for (let i = 0; i < jsonData.length; i++) {
    
    
        tableHtml+= '<tr>'
        for (let item in jsonData[i]) {
    
    
          // 增加\t为了不让表格显示科学计数法或者其他格式
          tableHtml += `<td>${
      
      jsonData[i][item] + '\t'}</td>`
        }
        tableHtml+= '</tr>'
      }
 //下载的表格模板数据
 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
                     xmlns:x="urn:schemas-microsoft-com:office:excel"
                     xmlns="http://www.w3.org/TR/REC-html40">
                     <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                     <x:Name>${
      
      worksheet}</x:Name>
                     <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                     </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                     </head><body>${
      
      tableHtml}</body></html>`;

急いでコピーしないでください。tableHtml後述するように、sheetJS を通じて変換できます。もちろん、ループの生成にも使用でき、保存の実装を直接確認できます。

1.SheetJS または xlsx-js スタイル

ページ内のデータは通常、配列オブジェクトタイプであり、sheetJS は json を html に変換できるため、考える手間が省けます。
SheetJS: https://github.com/SheetJS/sheetjs
SheetJS 中国語ドキュメント: https://github.com/rockboom/SheetJS-docs-zh-CN/
SheetJS は非常に優れたライブラリですが、そのコミュニティバージョンは To をサポートしていません。セルのスタイルを変更するには、Pro バージョンにアップグレードする必要があります。その後、申請するために作成者 Barabara に電子メールを送信する必要があります。しかし！単純なセルスタイルの変更は、ソースコードを変更することで実現できます。ここでは主に中央揃えに焦点を当てており、セルのデータ型はテキスト型でなければなりませんが、これで十分です。

xlsx-js スタイルについて話しましょう。
xlsx-js-style : https://github.com/gitbrent/xlsx-js-style
公式の説明はSheetJS Community Edition + Basic Cell Stylesで、良さそうですが、アプリ内にファイルを保存するため、使用されません。

達成

アイデアは次のとおりです。

セルスタイルの要件を満たすようにsheetJSのソースコードの一部を変更します。
SheetJSを使用してJSONをHTMLテキストに変換します（テーブルタグを取り出して、準備されたHTMLテンプレートに挿入する必要があります）
H5+ API を使用してファイルを保存する

まず、github からプロジェクトに xlsx.core.min.js をダウンロードします。

1. セルを中央に配置し、テキストの種類を設定します

ソースコード内で s["data-v"] を検索して、編集する必要がある位置を見つけます。
ここにコード行を追加します。

s["style"] = "text-align: center; mso-number-format:'\@'";

ここに画像の説明を挿入

筆者が観察してみたところ、ここの s が cell オブジェクトであることがわかりました。html に変換すると、 s の属性がセルのインラインスタイルとして記述されます。説明するまでもありませんが、このセルのデータ型はカスタムtext-align: centerタイプに設定されますmso-number-format:'\@'"。値はです@。

誰かが、テキストタイプとして設定したのではなく、なぜ再びカスタムタイプにしたのかと言いました。筆者は Excel を開いて、セルの書式をカスタムタイプに設定し、値が @ の場合にセルのタイプを確認すると、自動的にテキストタイプに変更されることを確認しました。

原因も調べてみたところ、Excelでは@が参照セルの元の文字なので、実際には元の文字表示となる@を1つ書くだけで、最終的には不明な型の処理を経てテキスト型に変わっていました。ご興味がございましたら、次の記事をご覧ください: Excel カスタム形式の「@」記号

2.sheetJSを使用してJSONをHTMLテキストに変換します

データ形式は次のとおりです。

excelData: [
    {
    
    
        no: "1",
        tag: "weqwrqwrqwrqwrq",
        remark: "22",
    },
    {
    
    
        no: "2",
        tag: "342343434343",
        remark: "33",
    },
    {
    
    
        no: "3",
        tag: "25125152512",
        remark: "44",
    },
],

htmlに変換します:

const sheet = XLSX.utils.json_to_sheet(this.excelData);
const htmlSheet = XLSX.utils.sheet_to_html(sheet);

ここでエクスポートされる HTML は、HTML タグを含む完全な文字列であり、正規表現を使用して抽出される table タグのコンテンツのみが必要です。

const pattern = /<table(?:(?!<\/table>).|\n)*?<\/table>/;
const tableHtml = htmlSheet.match(pattern)[0];

最後に完全なテンプレートを取得します。

const writeData = this.tableToExcel(tableHtml);

function tableToExcel(tableHtml) {
    
    
   //列标题
   let worksheet = "sheet1";
   //下载的表格模板数据
   let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
                       xmlns:x="urn:schemas-microsoft-com:office:excel"
                       xmlns="http://www.w3.org/TR/REC-html40">
                       <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                       <x:Name>${
      
      worksheet}</x:Name>
                       <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                       </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                       </head><body>${
      
      tableHtml}</body></html>`;
   return template;
},

H5+ API を使用してファイルを保存する

ここでは主に io インターフェイスが使用されており、ドキュメントは次のとおりです: html5plus io document
ファイルを保存するコードは次のとおりです。

 // #ifdef APP-PLUS
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
    
    
    let root = fs.root;
    // 直接在 documents 中创建文件
    root.getFile(
        `${
      
      new Date().getTime()}.xlsx`,
        {
    
    
            create: true,
        },
        (fileEntry) => {
    
    
            fileEntry.createWriter(
                (writer) => {
    
    
                    // 写入数据
                    writer.write(writeData);
                    // 写入文件成功完成的回调函数
                    writer.onwrite = (e) => {
    
    
                        uni.showToast({
    
    
                            title: `导出成功`,
                            icon: "none",
                        });
                    };
                },
                (err) => {
    
    
                    console.log(err, "创建文件写入器错误");
                }
            );
        },
        (err) => {
    
    
            console.log(err);
        }
    );
});
// #endif

アプリの保存ディレクトリの問題については、次の記事を参照してください。plus.io io
の API はレイヤーごとに、辛抱強く経験する必要があります。そうすれば、必ず目標を達成できます。
これでExcelへのエクスポート機能は完了です。

以上！