Show Barcode in PDF

Visualforceページでは、「renderAs=“PDF”」属性を使うとページをPDFに書き出すことができます。このPDFにGrapeCity Barcodeでバーコードを書き出すには、Web APIを使用します。 Web APIを使用するにあたり、アクセストークンの生成が必要となるため、PDFを書き出すVisualforceページの前に、トークンを生成するページの表示が必要です。たとえば「PDFに書き出す」ボタンを用意し、このボタンのクリックでPDFファイルのページに遷移する直前にトークンを生成する方法が考えられます。

前提

次の知識が必要です。

  • Visualforceページの開発
  • JavaScriptの開発

利用手順

ユーザーは次の手順で利用します。

sequenceDiagram participant ユーザー participant Salesforce participant RayBarcode ユーザー->>Salesforce: 「PDF生成」ボタンをクリックする Salesforce->>RayBarcode: ApexかJavaScriptでアクセストークンを要求する RayBarcode->>Salesforce: アクセストークンを返す Salesforce->>RayBarcode: アクセストークンとURLからバーコードを要求する RayBarcode->>Salesforce: バーコード画像を返す Salesforce->>ユーザー: VisualforceでPDFを生成する

サンプルコード

まず、PDFを出力するVisualforceページとそのコントローラーを作成します。

Salesforce Classicの場合、「設定 > 開発 > Apexクラス」に次のコントローラーを追加します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Apexクラス」に次のコントローラーを追加します。

// RenderBarcodeAsPDFFilePageController.cls
public class RenderBarcodeAsPDFFilePageController {
    public String QRCodeImageURL {get; set;}
    public String BarcodeValue {get; set;}
    static final String gcbarcode_baseurl = 'https://gcbarcode.azurewebsites.net';
    
    public RenderBarcodeAsPDFFilePageController()
    {
        this.BarcodeValue= System.currentPageReference().GetParameters().get('value');        
        this.QRCodeImageURL = '';        
        String token = gcbc__GcBarcodeSetting__c.getInstance(UserInfo.getUserId()).gcbc__AccessToken__c;        
        this.QRCodeImageURL = gcbarcode_baseurl + '/api/Png/qrcode?Width=300&Height=300&value=' + BarcodeValue + '&token=' + token;        
    }
}

その後、このコントローラーを呼び出すVisualforceページを追加します。このVisualforceページを「プレビュー」実行しても、この時点では空のPDFファイルが表示されます。

PDFファイルを描画するVisualforceページです。通常のVisualforceページとは異なる「renderAs=“PDF”」属性がPDF出力を示します。

<!-- RenderBarcodeAsPDFFilePage.vfp -->
<apex:page Controller="RenderBarcodeAsPDFFilePageController" renderAs="PDF">
    <apex:outputPanel id="barcodeImgPane">
        <apex:image alt="{!BarcodeValue}" url="{!QRCodeImageURL}"/>
    </apex:outputPanel>
</apex:page>

次に、PDFファイルを呼び出すためのVisualforceページとそのコントローラーを作成します。このページは「バーコードの値」入力ボックスと「PDFを表示」ボタンを持ちます。ユーザーが入力ボックスに任意の値を入力して「PDFを表示」ボタンをクリックすると、その値がQRコードとしてPDFに表示されます。

コントローラーを作成するには、Salesforce Classicの場合、「設定 > 開発 > Apexクラス」を表示します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Apexクラス」を表示します。または、開発者コンソールを使用します。

// BarcodePrintPdfDemoContoller.cls
public class BarcodePrintPdfDemoContoller {
    // 入力値を格納する
    public String BarcodeValue {get; set;}
    // 「PDFを表示」ボタンのクリック後の処理
    public PageReference ShowQRCode(){
        if (String.isBlank(this.BarcodeValue)){
            return null;
        }
        // アクセストークンを生成する
        gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();
        PageReference pdfPage = Page.RenderBarcodeAsPDFFilePage;
        // バーコードの値をURLエンコードする
        String utf8encodedValue = EncodingUtil.urlEncode(this.BarcodeValue, 'UTF-8');
        pdfPage.getParameters().put('value', utf8encodedValue);
        return pdfPage;
    }
}

PDFファイルを呼び出すためのVisualforceページです。Visualforceページを作成するには、Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」を表示します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」を表示します。または、開発者コンソールを使用します。

<!-- BarcodePrintPdfDemo.vfp -->
<apex:page controller="BarcodePrintPdfDemoContoller">       
    <apex:form id="form1">
        <apex:pageBlock >
            <apex:outputLabel value="バーコードの値:" for="inputBarcodeValue"/>
            <apex:inputText value="{!BarcodeValue}" id="inputBarcodeValue" />
            <br/>
            <apex:outputText value="記入例：1234567890" />
        </apex:pageBlock>
        <apex:commandButton action="{!ShowQRCode}" value="PDFを表示" reRender="form1"/>
    </apex:form>
</apex:page>

「PDFを表示」ボタンをクリックして、バーコード入りのPDFファイルが表示されれば成功です。

Copyright © MESCIUS inc. All rights reserved.