BlazorチュートリアルでPDFファイルを作成する

Visual Studioでの新しいプロジェクトの作成

まず、Microsoft Visual Studio アプリケーションを開き、ファイルメニューから"新しいプロジェクト"を選択します。 次に、"Blazor Server App"を選択します。

Visual Studioで新しいプロジェクトを作成する

プロジェクト名を入力し、ファイルパスを選択します。 次に、作成ボタンをクリックします。

新しいBlazorアプリケーションの名前と場所を選択する

希望 for .NET Frameworkを選択します（このチュートリアルでは.NET 6.0を使用します）。以下のスクリーンショットを参照してください。

.NET 6.0 Frameworkを使用したVisual Studioでの新しいプロジェクトの作成

Microsoft Visual Studioは、このBlazorアプリケーションの構造を生成します。

次に、この新しいプロジェクトにIronPDFライブラリを追加してください。

3.1 Visual StudioのNuGetパッケージマネージャーを使用

Visual StudioはNuGetパッケージマネージャーを提供し、プロジェクトにライブラリを直接インストールするのを助けます。 下のスクリーンショットは、NuGetパッケージマネージャを開く方法を示しています。

Visual StudioのNuGetパッケージマネージャーへのアクセス

"Browse"タブの検索フィールドに"IronPDF"と入力して検索してください。以下のスクリーンショットを参照してください。

NuGetパッケージマネージャーGUIでIronPDFライブラリを検索する

上記の画像には関連する検索結果の一覧が表示されています。 パッケージをプロジェクトにインストールするために必要なオプションを選択します。

3.2 Visual Studioコマンドラインを使用

Visual Studioでは、ツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソールに移動します。

パッケージ マネージャー コンソールタブに次の行を入力してください。

Install-Package IronPdf

パッケージは現在のプロジェクトにダウンロードおよびインストールされます。

NuGetパッケージマネージャーコンソールを使用してIronPDFライブラリをインストールする

3.3 NuGetウェブサイトから直接ダウンロード

IronPDFライブラリをインストールする3つ目の方法は、ウェブサイトからNuGetパッケージを直接ダウンロードすることです。

IronPDF用NuGetウェブサイトに移動します。

• 右側のメニューから"Download Package"オプションをクリックします。
• ファイルシステム上でダウンロードしたパッケージを開きます。 自動的にインストールされます。
• ソリューションを再読み込みし、プロジェクトで使用を開始します。

3.4 IronPDFウェブサイトから直接ダウンロード

IronPDFウェブサイトを訪問し、IronPDFパッケージを直接ダウンロードしてください。

ダウンロード後、以下の手順に従ってパッケージをプロジェクトに追加します。

• ソリューションウィンドウからプロジェクトを右クリックします。
• "追加">"参照"のオプションを選択し、前にダウンロードしたライブラリの場所に移動します。
• "OK"をクリックして、ライブラリを参照として追加します。

4. Blazor Server AppでPDF文書を作成する

このチュートリアルのBlazorアプリは、IronPDFを使用して、ウェブページのHTMLコンテンツをそのURLで取得し、それをPDF文書に変換します。

プロジェクト内の.razorファイルに以下のソースコードを入力します。

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

上記のコードスニペットは、HTMLからPDF文書を生成する2つの方法を使用しています。 1 つ目は IronPDF のRenderUrlAsPdfメソッドで、指定された URL から HTML コンテンツをダウンロードし、それを PDF 形式に変換します。

2 番目の方法は静的な JSRuntime.InvokeVoidAsync メソッドで、ブラウザ for JavaScriptエンジンをトリガーして、Web ページのスコープ内でJavaScript関数を呼び出し、PDF コンテンツをクライアントのファイル システム上のファイルに保存します。

こ for JavaScript関数は以下に含まれています。

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

上記 for JavaScript関数はBlazorからBase64データを受け取り、それをBlobに変換してクライアント側に保存します。

あるいは、 @@--CODE-181-- @@ クラスのSaveAsメソッドを使用して、PDF ドキュメントをブラウザーのローカル ストレージに保存することもできます。