4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

プリザンターでPDF出力したい時の方法

Last updated at Posted at 2023-08-16

プリザンターでPDF出力がしたくなったのでスクリプトを追加した

公式マニュアル見る限りPDF機能は無いようなのでスクリプトを追加しました。
js自体が分からないので、とても苦労した。。。。。。

必要なライブラリ

外部ライブラリを使用しています。
どちらもMIT Licenseのようです。

これらをダウンロードして保存します。
...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

HtmlBodyBottom.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とかで機能の使い方を解説されてる!

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?