VueでExcelファイルをエクスポートするにはどうすればよいですか?-Vue.js-php.cn

VueでExcelファイルをエクスポートするにはどうすればよいですか?

青灯夜游

リリース： 2020-11-13 18:01:58

転載

3785 人が閲覧しました

VueでExcelファイルをエクスポートするにはどうすればよいですか?

今日開発中に遭遇したのは、既存のデータを使用して Excel ファイルをエクスポートする方法です。インターネット上には多くの方法があり、データフローの使用について話しているものもあります (https://) www .cnblogs.com/yeqrblog/p/9758981.html ですが、今の私の考えは、配列データを使用するだけで、データフローを使用して実装することではありません。事実はそれが可能であることを証明しています:

1 .依存関係をインストールします

//npm 
npm install -S file-saver xlsx
npm install -D script-loader

ログイン後にコピー

2. main.js に Bolb.js と Export2Excel.js

をインポートします。2 つの js ファイルアドレス:

リンク: https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
抽出コード: sirm

import Blob from &#39;./excel/Blob&#39;
import Export2Excel from &#39;./excel/Export2Excel.js&#39;

ログイン後にコピー

3. コンポーネントでの使用

//导出的方法
exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require(&#39;../excel/Export2Excel&#39;);
        const tHeader = [&#39;序号&#39;, &#39;昵称&#39;, &#39;姓名&#39;];
        // 上面设置Excel的表格第一行的标题
        const filterVal = [&#39;index&#39;, &#39;nickName&#39;, &#39;name&#39;];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.tableData;  //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, &#39;列表excel&#39;);
      })
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))

ログイン後にコピー

tHeader はテーブルヘッダー、filterVal のデータはテーブルのフィールド、tableData はテーブルにデータを格納し、型は配列で、オブジェクトはその中に格納されます。テーブルはオブジェクトです。＃＃＃＃＃＃それでおしまい。