Print.js를 사용하여 kintone 목록 화면 인쇄를 구현했습니다.
이런 포스트가 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에 다음을 로드합니다.
코드
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에 다음을 로드합니다.
(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에 다음을 로드합니다.
감상
현상 일람 화면에는 인쇄 기능이 없기 때문에, 요건에 따라서는 적당히 사용할 수 있는 것 같은 느낌입니다.
링크
Reference
이 문제에 관하여(Print.js를 사용하여 kintone 목록 화면 인쇄를 구현했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sy250f/items/9a71300662512d2f5bec텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)