Pleasanterの添付ファイルに登録されたPDFを表示する話。
Pleasanterの添付ファイル機能は便利だが、登録したファイルを確認するにはダウンロードし開く必要がある。
せっかく登録された情報が面倒くさいという理由で活用されないのは残念なので、Pleasanterの添付ファイルを表示する機能を追加した。
使ったもの
Pleasanter Ver1.3.45.0 Community Edition
ことの流れ
電子帳簿保存法対応として領収書の保存をimplem/pleasanterでやりたいとの相談があった。
添付ファイルの項目使ってやればいいじゃん、と軽く答えたものの、Pleasanterの添付ファイルはいちいちダウンロードしないと内容が見えないので、登録した取引先や金額の確認に手間がかかるので何とかしたいとのこと。
確かに面倒くさいので、なんとかすることにした。
Pleasanterの添付ファイル本体はAPIを使って取得することができる、と公式のドキュメントにある。
https://www.pleasanter.org/manual/684960
レスポンスはJSON、ファイル本体はBASE64エンコードされた状態なので、表示するためにはデコードしなくちゃいけない。
いつもならbase64-jsなどのライブラリを使わせてもらって簡単にデコードするのだが、その場合ライブラリをどこに置くのかが問題になる。
Pleasanterは社内全体で利用するので、サーバにライブラリを配置するのは管理が面倒。
ライブラリソースをスクリプトにコピーすると、ソースが読みにくくなり再利用できる人が限られる。
なのでデコード部分を標準実装するが、方法を知らないのでChatGPTくんに作ってもらった。
PleasanterのAPIを利用して「添付ファイルA(AttachmentsA)」の項目を取り出し、デコードしてPDFに戻す。
PDFをブラウザ内に表示するためのiframeブロックを作り、表示場所のコントロールを誰でもできるようにするためPleasanterの「内容(Body)」項目を置き換えるようにする。
ということにしてできたのが以下の内容。
$p.events.on_editor_load = function () {
//添付PDFファイルのGUIDを取得
var AttachA = $('#Results_AttachmentsA').val();
//添付ファイル項目はJSONで返るためパース
var AttachAJson = JSON.parse(AttachA);
// リクエストURLの作成
const apiUrl = 'http://{サーバー名}/api/binaries/' + AttachAJson[0].Guid + '/get';
const requestData = JSON.stringify({
ApiVersion: 1.1,
//ローカルサーバーで使う分にはAPIキーの設定不要(アクセス権はログインユーザーに準拠)。編集画面のソースにAPIキーが表示されてしまう場合があるので使わない。
//ApiKey: 'XXXXXXXXXXXXXXX'
});
// XMLHttpRequestオブジェクト作成
const xhr = new XMLHttpRequest();
// リクエスト設定
xhr.open('POST', apiUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
// リクエスト処理
xhr.onload = function () {
if (xhr.status === 200) {
// リクエスト成功
console.log('APIリクエスト成功');
const responseJson = JSON.parse(xhr.responseText);
// Base64データをデコードし、Blobに変換
const base64Data = responseJson.Response.Base64;
const binaryData = atob(base64Data);
const uint8Array = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
uint8Array[i] = binaryData.charCodeAt(i);
}
const blob = new Blob([uint8Array], { type: 'application/pdf' }); // MIMEタイプを"application/pdf"に指定
// Blob URLを生成
const blobUrl = URL.createObjectURL(blob);
// iframe要素を作成して表示
const iframe = document.createElement('iframe');
iframe.src = blobUrl;
iframe.style.width = '1000px';
iframe.style.height = '700px'; // 適切な高さを設定してください
$p.getControl('Body').parent().html(iframe);
} else {
// リクエスト失敗
console.error('APIリクエストエラー:', xhr.statusText);
}
};
// リクエスト実行
xhr.send(requestData);
}
Pleasanterにサンプルテーブルを作り、適当にエディタの設定をする。今回は添付ファイルが複数の場合を想定していないので、ファイル数制限を1にしている。
スクリプトを追加し、タイトルには適当な文字を、スクリプトに上の内容を、出力先の"編集"にチェックを入れて追加し準備完了。
レコードを新規作成し、PDFファイルを添付して登録すると、「内容」の項目の場所にPDFビューアが表示される。
PDF表示のコントロールやPDF以外のファイルが添付されていた場合などの処理を追加する必要はあるが、Pleasanterの添付ファイル機能を活用するシーンが増えそうな気がするので残しておく。