PDFとしてエクスポート

ここでは、HTML マークアップおよび jQuery スクリプトを使用して、 Wijeventscalendar エクスポートへの参照を HTML プロジェクトに追加する方法について説明します。また、エクスポート時の多数の PDF 設定のカスタマイズ方法についても説明します。

Wijeventscalendar&を PDF ファイル形式にエクスポートするには、以下のスクリプトおよびマークアップを使用します。また、ドキュメントの画質、圧縮速度、フォントタイプなど、さまざまなオプションも設定できます。ドキュメントをパスワード保護し、コンテンツのコピーと編集を制限することもできます。PDF へのエクスポートの詳細については、「PDF 設定のエクスポート」を参照してください。

以下のスクリプトでは、ボタンのクリック時にウィジェットを初期化し、イベントカレンダーをエクスポートするためのさまざまなオプションを設定します。

イベントカレンダーをエクスポートするための API へのパスは、ComponentOne デモサーバーに転送されます。
エクスポートするファイルのタイプは PDF に設定します。
エクスポートするファイルの名前は「MyEvCalPDFExport」に設定します。
各 PDF オプションは、カスタムの用紙サイズおよび余白を使用し、画質より印刷速度を優先するようにそれぞれ設定します。
また、このスクリプトでは PDF をパスワード保護します。ファイルを開くにはユーザーパスワードの入力が必要となり、ファイルのコンテンツを編集およびコピーするにはオーナーパスワードの入力が必要となります。

Image
スクリプト
マークアップ

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijevcal", "amplify", "wijmo.wijaccordion", "wijmo.wijtextbox", "wijmo.wijcheckbox", "wijmo.wijdropdown", "eventscalendarexport"], function () { $(document).ready(function () { $("#eventscalendar").wijevcal(); $("#accordion").wijaccordion({ header: "h3" }); $(".settingcontainer input[type='text'],.settingcontainer input[type='password']").wijtextbox(); $(".settingcontainer select").wijdropdown(); $(".settingcontainer input[type='checkbox']").wijcheckbox(); $("#exportImage").button().click(function () { var type = $("#exporttype").val(); $("#eventscalendar").wijevcal("exportEventsCalendar", { serviceUrl: getServiceUrl(), eventsCalendar: $("#eventscalendar").data("wijmo-wijevcal"), exportFileType: wijmo.exporter.ExportFileType[type], fileName: $("#fileName").val(), receiver: saveFile, contentType: $("#requestContentType").val(), method: wijmo.exporter.ExportMethod[$("#exportMode").val()] }); }); $("#exportPdf").button().click(function () { $("#eventscalendar").wijevcal("exportEventsCalendar", { fileName: $("#fileName").val(), serviceUrl: getServiceUrl(), eventsCalendar: $("#eventscalendar").data("wijmo-wijevcal"), exportFileType: wijmo.exporter.ExportFileType.Pdf, receiver: saveFile, contentType: $("#requestContentType").val(), method: wijmo.exporter.ExportMethod[$("#exportMode").val()], pdf: { imageQuality: wijmo.exporter.ImageQuality[$("#imageQuality option:selected").val()], compression: wijmo.exporter.CompressionType[$("#compression option:selected").val()], fontType: wijmo.exporter.FontType[$("#fontType option:selected").val()], author: $("#pdfAuthor").val(), creator: $("#pdfCreator").val(), subject: $("#pdfSubject").val(), title: $("#pdfTitle").val(), producer: $("#pdfProducer").val(), keywords: $("#pdfKeywords").val(), encryption: wijmo.exporter.PdfEncryptionType[$("#encryption option:selected").val()], ownerPassword: $("#ownerPassword").val(), userPassword: $("#userPassword").val(), allowCopyContent: $("#allowCopyContent").prop('checked'), allowEditAnnotations: $("#allowEditAnnotations").prop('checked'), allowEditContent: $("#allowEditContent").prop('checked'), allowPrint: $("#allowPrint").prop('checked') } }); }); }); }); </script> <style type="text/css"> #eventscalendar { width: 700px; height:550px; } </style>

スクリプト

コードのコピー

    <script id="scriptInit" type="text/javascript">
        require(["wijmo.wijevcal", "amplify", "wijmo.wijaccordion", "wijmo.wijtextbox", "wijmo.wijcheckbox", "wijmo.wijdropdown", "eventscalendarexport"], function () {
            $(document).ready(function () {
                $("#eventscalendar").wijevcal();
                $("#accordion").wijaccordion({
                    header: "h3"
                });
                $(".settingcontainer input[type='text'],.settingcontainer input[type='password']").wijtextbox();
                $(".settingcontainer select").wijdropdown();
                $(".settingcontainer input[type='checkbox']").wijcheckbox();
                $("#exportImage").button().click(function () {
                    var type = $("#exporttype").val();
                    $("#eventscalendar").wijevcal("exportEventsCalendar", {
                        serviceUrl: getServiceUrl(),
                        eventsCalendar: $("#eventscalendar").data("wijmo-wijevcal"),
                        exportFileType: wijmo.exporter.ExportFileType[type],
                        fileName: $("#fileName").val(),
                        receiver: saveFile,
                        contentType: $("#requestContentType").val(),
                        method: wijmo.exporter.ExportMethod[$("#exportMode").val()]
                    });
                });
                $("#exportPdf").button().click(function () {
                    $("#eventscalendar").wijevcal("exportEventsCalendar", {
                        fileName: $("#fileName").val(),
                        serviceUrl: getServiceUrl(),
                        eventsCalendar: $("#eventscalendar").data("wijmo-wijevcal"),
                        exportFileType: wijmo.exporter.ExportFileType.Pdf,
                        receiver: saveFile,
                        contentType: $("#requestContentType").val(),
                        method: wijmo.exporter.ExportMethod[$("#exportMode").val()],
                        pdf: {
                            imageQuality: wijmo.exporter.ImageQuality[$("#imageQuality option:selected").val()],
                            compression: wijmo.exporter.CompressionType[$("#compression option:selected").val()],
                            fontType: wijmo.exporter.FontType[$("#fontType option:selected").val()],
                            author: $("#pdfAuthor").val(),
                            creator: $("#pdfCreator").val(),
                            subject: $("#pdfSubject").val(),
                            title: $("#pdfTitle").val(),
                            producer: $("#pdfProducer").val(),
                            keywords: $("#pdfKeywords").val(),
                            encryption: wijmo.exporter.PdfEncryptionType[$("#encryption option:selected").val()],
                            ownerPassword: $("#ownerPassword").val(),
                            userPassword: $("#userPassword").val(),
                            allowCopyContent: $("#allowCopyContent").prop('checked'),
                            allowEditAnnotations: $("#allowEditAnnotations").prop('checked'),
                            allowEditContent: $("#allowEditContent").prop('checked'),
                            allowPrint: $("#allowPrint").prop('checked')
                        }
                    });
                });
            });
        });
    </script>
    <style type="text/css">
    #eventscalendar
     {
       width: 700px;
       height:550px;
     }
</style>

スクリプト	コードのコピー
<div id="eventscalendar"></div> <input type="button" value="Export to PDF" id="exportPDF"/>

関連トピック