プリザンターでPDF出力がしたくなったのでスクリプトを追加した
公式マニュアル見る限りPDF機能は無いようなのでスクリプトを追加しました。
js自体が分からないので、とても苦労した。。。。。。
必要なライブラリ
外部ライブラリを使用しています。
どちらもMIT Licenseのようです。
- jsPDF
https://github.com/parallax/jsPDF - html2canvas
https://github.com/niklasvh/html2canvas
これらをダウンロードして保存します。
...Implem.Pleasanter\wwwroot\scripts
ここにpdfといフォルダを作って、保存するのは以下の2つだけで大丈夫なはず。
- jspdf.umd.js
- html2canvas.min.js
拡張htmlへの設定
...Implem.Pleasanter\App_Data\Parameters\ExtendedHtmls
へファイルを追加します。
ファイル名は「HtmlBodyBottom.html」としました。
ファイル名の説明などは公式マニュアルにあります。
https://pleasanter.org/manual/extended-html
<script type="text/javascript" src="/scripts/pdf/jspdf.umd.js"></script>
<script type="text/javascript" src="/scripts/pdf/html2canvas.min.js"></script>
これを保存したら反映させるために、IISを再起動します。
これで外部ライブラリを使う準備はOK!
追加したスクリプト
この内容を「編集」画面でだけ出るように設定。
「PDF」というボタンが増えるので、それを押すと画面そのままでPDFとして保存できた!!!
画面がそのまま一枚のPDFになるだけなので使い勝手がいいわけではないですが、とりあえずできたのでOK!!!
$p.events.on_editor_load = function(){
$("#MainCommands button:last-child").after($('<button onclick="$p.ex.exportPDF();">PDF出力</button>').button({icon:'ui-icon-arrowthickstop-1-s'}))
}
$p.ex.exportPDF = function() {
var doc = document.getElementById('MainCommandsContainer')
doc.setAttribute('data-html2canvas-ignore', 'true')
const source = document.getElementById('Application')
html2canvas(source).then(capture => {
const imgData = capture.toDataURL('image/png')
const doc = new jspdf.jsPDF()
const width = doc.internal.pageSize.width
doc.addImage(imgData, 'PNG', 10, 10, width * 0.9, 0)
doc.save("出力.pdf")
})
}
内容について
var doc = document.getElementById('MainCommandsContainer') doc.setAttribute('data-html2canvas-ignore', 'true')
これは、画面そのままPDFにすると「戻る 更新 メール、、、」とかのバーが表示している部分にそのまま残ってじゃまなので消すために入れてます。
const source = document.getElementById('Application')
このIDを変えればPDFにする範囲も変えられる。
プリザンターは頻繁に更新されててすごい!
バージョンアップが頻繁にされてて色々機能追加されるし、合わせて公式のユーザーマニュアルも更新される!
https://pleasanter.org/manual
他にも、プリザンターの会社の方々?が、Qiitaとかで機能の使い方を解説されてる!