詳細画面にExcel(csv)出力ボタンを配置するjavascript

kintone カスタマイズ
1

タイトルの通りです。

出力したExcel（csv）は，Wordに差し込み印刷するために使用するので，
レイアウトは一覧形式がいいです。
（詳細画面の見た目通りでなくて良い）

氏名 フリガナ 生年月日
〇山〇子 マルヤママルコ 2000-01-01

みたいな感じにしたいです。

どのようにしたらいいでしょうか？

2

masuto様

お世話になっております．
トヨクモの江田と申します．

https://raw.githubusercontent.com/polygonplanet/encoding.js/master/encoding.min.js
をダウンロードして読み込み後，下記JSを読み込んで実装できます．

(function() {
  "use strict";
  kintone.events.on([
    'app.record.detail.show',
  ], function(event){
    var encoding = 'SJIS';
    return kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', {
      app: kintone.app.getId()
    }).then(function(response){
      var outputfields = Object.keys(response.properties).filter(function(fieldCode){
        return event.record[fieldCode];
      });
      var csvButton = document.createElement('a');
      csvButton.innerText = 'CSVダウンロード';
      kintone.app.record.getHeaderMenuSpaceElement().appendChild(csvButton);
      csvButton.addEventListener('click', function(){
        var a = document.createElement('a');
        a.href = URL.createObjectURL(new Blob([
          new Uint8Array(Encoding.convert(Encoding.stringToCode(outputfields.map(function(outputfield){
            return '"' + outputfield + '"';
          }).join(',') + "\r" +
          outputfields.map(function(outputfield){
            var value = event.record[outputfield].value;
            return '"' + (Array.isArray(value) ? value.join(',') : value) + '"';
          }).join(',') + "\r"
          ), encoding))
        ], {type: 'text/csv'}));
        a.download = 'data.csv';
        document.body.appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
      });
    });
  });
})();
3

江田篤史 さま

 

ありがとうございます！
コピペするだけで簡単にできました！！
大変助かりました。

本当にありがとうございました！

4

お世話になります。

上記の投稿者様よ同様のことをしたいと思い、江田様の提示頂いたリンクをJAVAscript/CSSでカスタマイズのPC用のJAVA scriptファイルに入力して追加し、提示頂いたJSをJSeditにコピーしてアップロードし、CSVファイルを出力する、というボタンはでましたが、押してもダウンロードが始まりません。何が問題かご教示頂けないでしょうか。初心者ですみません。

5

taknobさん

お世話になっております。

下記を参考に、コンソール画面にエラーが表示されていないかご確認いただけますか？
https://developer.cybozu.io/hc/ja/articles/207613916

6

江田様
ありがとうございます。最初に提示頂いたリンクのサイトからダウンロードしたら上手くいきました。
今回、教えて頂いたページも非常に参考になりました。今後の参考にもいたします。ありがとうございました。

7

江田篤史 様

上記のコードを使用してCSV出力ボタンを出現させたいのですが、フィールドコードを指定して、指定したフィールドコードのみを出力対象にするにはどのようにしたらよいでしょうか？
プログラミング初心者なものでしてご教示いただければ幸いです。

宜しくお願い致します。

8

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。