Loading
Salesforce から送信されるメールは、承認済ドメインからのみとなります続きを読む

Visualforce ページで blob を PDF として表示する

公開日: May 4, 2026
説明
Visualforce ページで PDF ファイルの内容を表示する方法。
pdf がコントローラーに blob 値として保存されている場合、次の解決策でこれを実現できます。
解決策


Visualforce ページ:

<apex:page controller="ViewPdf">
	<iframe src="data:{!att.ContentType};base64,{!pdf}" >
</iframe></apex:page>

*注意: 「data:」URI が一部のブラウザでグローバルにサポートされていない場合があります。

たとえば、IE では data: URI が でサポートされていません。 

ブラウザによって、Salesforce ではコントロールできない独自のサイズ制限が設けられています。

例: 

  • Firefox は、現在、実質的に長さ無制限でデータ URL をサポートしています。
  • Chrome は、2MB という制限があります。

コントローラー:

public class ViewPdf {
    public Attachment att {
        get {
            if (att == null) {
                att = [SELECT Body, ContentType, Name FROM Attachment WHERE ID = '00PG0000004COZU'];
            }
            return att;
        }
        private set;
    }
    public String pdf {
        get {
            return EncodingUtil.Base64Encode(att.body);
        }
    }
}


 

その他のリソース

エラー「This content is blocked.Contact the site owner to fix the issue.」(このコンテンツはブロックされています。問題を修正するには、サイト所有者にお問い合わせください。)


注記: Chrome の 2MB 制限は、オブジェクト URL を作成することで回避できます。

// Blob からオブジェクト URL を作成します。
var objectUrl = window.URL.createObjectURL(blob);


実装の例を次に示します:

var objectUrl = window.URL.createObjectURL(blob);
<apex:page showHeader="false" applyHtmlTag="false" cache="true" readOnly="true" controller="HDMS_ViewPDF">
    <script>
        // この関数はページの読み込み後に呼び出されます
        function loadPDF() {
            var contentVersion = '{getContentVersionRecord}';
            var base64Data2 = btoa(contentVersion.versiondata);
            console.log('base64Data2' + base64Data2);
            var fileType = contentVersion.fileType;
            console.log('fileType' + fileType);
            
            // base64文字列をバイナリデータにデコード
            var binaryData = atob(base64Data);
            
            // バイナリデータからUint8Arrayを作成
            var byteArray = new Uint8Array(binaryData.length);
            for (var i = 0; i < binaryData.length; i++) {
                byteArray[i] = binaryData.charCodeAt(i) & 0xff;
            }
            
            // Uint8ArrayからBlobを作成
            console.log("base64Type.type: "+ base64Data.type);
            var blob = new Blob([byteArray], {type: byteArray.type});
            //var blob = new Blob([byteArray], {type: "application/pdf"});
            
            // BlobからオブジェクトURLを作成
            var objectUrl = window.URL.createObjectURL(blob);
            
            // iframeのsrc属性としてオブジェクトURLを設定
            document.getElementById('pdf-viewer').src = objectUrl;
        }
    </script>
    
    <iframe id="pdf-viewer" height="800px" width="100%" title="TestData"></iframe>
    
    <script>
        window.onload = loadPDF;
    </script>
</apex:page>

// Apexコントローラからbase64エンコードされたPDFデータを取得
var base64Data = '{!gePdfInfo}';
ナレッジ記事番号

000385665

 
読み込み中
Salesforce Help | Article