Print.js를 사용하여 kintone 목록 화면 인쇄를 구현했습니다.

htps : //에서 ゔぇぺぺr. cy 흐림. 이오 /hc
이런 포스트가 developer network 에 올라가고 있어 그 중에서 소개되고 있던 Print.js 가 신경이 쓰였으므로 조금 만져 보았습니다.

인쇄 화면





목록 화면





코드



indexPrint.js
(function() {
    "use strict";
    kintone.events.on("app.record.index.show", function(event) {

        if (document.getElementById('my_index_button') !== null) {
            return;
        }

        let myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerText = '印刷';

        let query = kintone.app.getQuery();
        console.log(query);

        let views = {};
        let fields = [];
        let body  = {'app' : kintone.app.getId()};
        kintone.api(kintone.api.url('/k/v1/app/views', true), 'GET', body, function(resp) {
            // success
            console.log(resp);
            views = resp;
            console.log(views.views['自分が作成したもの'].fields);
            fields = views.views['自分が作成したもの'].fields;
        }, function(error) {
            // error
            console.log(error);
        });        

        let objFields = {};        
        kintone.api(kintone.api.url('/k/v1/app/form/fields', true), 'GET', body, function(resp) {
            // success
            console.log(resp);
            objFields = resp;
        }, function(error) {
            // error
            console.log(error);
        });

        // ボタンクリック時の処理
        myIndexButton.onclick = function() {
            let printJson = [];
            let body = {
                "app": kintone.app.getId(),
                "query": query,
                "fields": fields
            };
            kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function(resp) {
                // success
                console.log(resp);
                console.log(objFields.properties[fields[1]].label);
                for (let i = 0, rowCount = resp.records.length; i < rowCount; i++ ) {
                    printJson.push({[objFields.properties[fields[1]].label]: resp.records[i][fields[1]].value,
                        [objFields.properties[fields[2]].label]: resp.records[i][fields[2]].value,
                        [objFields.properties[fields[3]].label]: resp.records[i][fields[3]].value});
                }
                console.log(printJson);
                printJS({printable: printJson,
                    properties: [objFields.properties[fields[1]].label,
                    objFields.properties[fields[2]].label,
                    objFields.properties[fields[3]].label],
                    type: 'json'});
            }, function(error) {
                // error
                console.log(error);
            });
        };        
        kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();

설정



PC용 JavaScript 및 CSS에 다음을 로드합니다.
  • htps : // p-in tjs-4에서 6. kxcd 응. 이 m/p 인 t. 모두. js
  • htps : // p-in tjs-4에서 6. kxcd 응. 이 m/p 인 t. 모두. cs

  • 감상



    현상 일람 화면에는 인쇄 기능이 없기 때문에, 요건에 따라서는 적당히 사용할 수 있는 것 같은 느낌입니다.

    링크


  • Print.js
  • 좋은 웹페이지 즐겨찾기