Hướng dẫn display blob pdf in html - hiển thị pdf blob trong html

Tôi biết điều này là cũ nhưng vì điều này đã chỉ cho tôi đi đúng hướng, tôi nghĩ rằng tôi sẽ chia sẻ những gì tôi đang làm trong trường hợp người khác hạ cánh ở đây. Tôi không sử dụng btw góc.

Người dùng có thể xem hoặc tải xuống tệp. Sự lựa chọn được đưa ra với 2 nút hoặc 2 liên kết

Tôi đang sử dụng jQuery với plugin gốc cho XHR2. Điều này xử lý các liên kết/nút

$('.download-form').click(function(event) {
    event.preventDefault();
    let fid = $(this).data('formid');
    let force_download = $(this).data('forcedownload');
    $.ajax({
          url: '/download',
          dataType: 'native',
          type: 'POST',
          xhrFields: {
              responseType: 'blob'
          },
          data: {
               //you can send any parameters via POST here
               personID: "{{ @personID }}",
               file_record_id: pfid,
               file_type: "contract_form",
               dept: "your-dept",
               file_category: "fcategory",
               force_download: force_download
           },
           success: function(blob, status, xhr){
                if (xhr.getResponseHeader('Custom-FileError')>1) {
                      alertify.error(xhr.getResponseHeader('Custom-ErrorMsg'));
                }else{
                      //I thought this would work when viewing the PDF but it does not.
                      blob.name = xhr.getResponseHeader('Custom-FileName');
                      var fileURL = URL.createObjectURL(blob);
                      if (xhr.getResponseHeader('Custom-ForceDownload')==1) {
                            window.open(fileURL);
                            var link=document.createElement('a');
                            link.href=window.URL.createObjectURL(blob);
                            link.download=xhr.getResponseHeader('Custom-FileName');
                            link.click();
                       }else{
                            file_modal(fileURL,'Any Title');
                       }
                       
                   }
              }
           })
});

Sau đó, một số JavaScript khác cho phương thức

function file_modal(blob,the_title)
{

    let spinner = "
";
    $("#modal_static_label").html('Loading');
    $("#modal_static .modal-body").html(spinner);
    if (blob.length > 1) {
        $("#modal_static").modal("show");
        $("#modal_static_label").html(the_title);
        $("#modal_static .modal-body").empty().append('');
    }else{
         $("#modal_static .modal-body").empty().html('File error');
    }
    $("#modal_static .modal-footer").html('Close');
        
}

Về phía máy chủ, bạn sẽ cần gửi các tiêu đề tùy chỉnh như thế này [PHP]

header("Content-length: $file_size");
header("Custom-FileError: 0");
header("Custom-FileName: ".$this->params['original_filename']);
header("Custom-ForceDownload: ".$this->params['force_download']);
header('Content-Type: '.$web->mime($this->full_path.$this->new_file_name));
readfile($this->full_path.$this->new_file_name);

Nếu người dùng nhấp vào "Xem", một phương thức sẽ hiển thị PDF nếu họ nhấp vào "Tải xuống", cửa sổ tải xuống sẽ hiển thị với tên tệp mà bạn chọn. Tôi đã thử nghiệm điều này với các tệp PDF dưới 10MB và nó hoạt động như mong đợi.

Tôi hi vọng ai đó thấy nó hữu ích.

Tôi đang sử dụng HttpRequest để GET PDF:

http://www.example.com/path/some.pdf

Tôi đang sử dụng response.getBodyAsBlob() để lưu trữ dữ liệu vào ContentVersion

Tôi có thể xem tệp PDF nếu tôi mở ContentVersion thông qua UI Lightning.

Sau đó, tôi muốn hiển thị PDF trong một

$('.download-form').click(function(event) {
    event.preventDefault();
    let fid = $(this).data('formid');
    let force_download = $(this).data('forcedownload');
    $.ajax({
          url: '/download',
          dataType: 'native',
          type: 'POST',
          xhrFields: {
              responseType: 'blob'
          },
          data: {
               //you can send any parameters via POST here
               personID: "{{ @personID }}",
               file_record_id: pfid,
               file_type: "contract_form",
               dept: "your-dept",
               file_category: "fcategory",
               force_download: force_download
           },
           success: function(blob, status, xhr){
                if (xhr.getResponseHeader('Custom-FileError')>1) {
                      alertify.error(xhr.getResponseHeader('Custom-ErrorMsg'));
                }else{
                      //I thought this would work when viewing the PDF but it does not.
                      blob.name = xhr.getResponseHeader('Custom-FileName');
                      var fileURL = URL.createObjectURL(blob);
                      if (xhr.getResponseHeader('Custom-ForceDownload')==1) {
                            window.open(fileURL);
                            var link=document.createElement('a');
                            link.href=window.URL.createObjectURL(blob);
                            link.download=xhr.getResponseHeader('Custom-FileName');
                            link.click();
                       }else{
                            file_modal(fileURL,'Any Title');
                       }
                       
                   }
              }
           })
});

Sử dụng bộ điều khiển:

    public with sharing class PDFPreviewController {

        public String getPDF() {
            return EncodingUtil.base64Encode([SELECT VersionData FROM ContentVersion WHERE ID = :RecordID].VersionData);
        }

        private String RecordID {
            get {
                return ApexPages.currentPage().getParameters().get('id');
            }
        }
    }

Nhưng PDF không hiển thị.

Tôi nhận được tin nhắn này bằng chrome:

This site can't be reached The web page at data:application/pdf;base64;JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/KQovQ3JlYXRvciAo/v8AdwBrAGgAdABtAGwAdABvAHAAZABmACAAMAAuADEAMgAuADQALQBkAGUAdikKL1Byb2R1Y2VyICj+/wBRAHQAIAA0AC4AOAAuADcpCi9DcmVhdGlvbkRhdGUgKEQ6MjAxOTA3MjIxOTAwMjlaKQo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9TQSB0cnVlCi9TTSAwLjAyCi9jYSAxLjAKL0NBIDEuMAovQUlTIGZhbHNlCi9TTWFzayAvTm9uZT4+CmVuZG9iago0IDAgb2JqClsvUGF0dGVybi ........ DEwNzUxIDAwMDAwIG4gCjAwMDAwMTEwMjAgMDAwMDAgbiAKMDAwMDAxNTExOCAwMDAwMCBuIAowMDAwMDE1NDU3IDAwMDAwIG4gCjAwMDAwMTUwOTcgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAzMwovSW5mbyAxIDAgUgovUm9vdCAxOCAwIFIKPj4Kc3RhcnR4cmVmCjE2MzE5CiUlRU9GCg== might be temporarily down or it may have moved vĩnh viễn đến một địa chỉ web mới. Err_invalid_url
The web page at
data:application/pdf;base64;JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/KQovQ3JlYXRvciAo/v8AdwBrAGgAdABtAGwAdABvAHAAZABmACAAMAAuADEAMgAuADQALQBkAGUAdikKL1Byb2R1Y2VyICj+/wBRAHQAIAA0AC4AOAAuADcpCi9DcmVhdGlvbkRhdGUgKEQ6MjAxOTA3MjIxOTAwMjlaKQo+PgplbmRvYmoKMyAwIG9iago8PAovVHlwZSAvRXh0R1N0YXRlCi9TQSB0cnVlCi9TTSAwLjAyCi9jYSAxLjAKL0NBIDEuMAovQUlTIGZhbHNlCi9TTWFzayAvTm9uZT4+CmVuZG9iago0IDAgb2JqClsvUGF0dGVybi
........ DEwNzUxIDAwMDAwIG4gCjAwMDAwMTEwMjAgMDAwMDAgbiAKMDAwMDAxNTExOCAwMDAwMCBuIAowMDAwMDE1NDU3IDAwMDAwIG4gCjAwMDAwMTUwOTcgMDAwMDAgbiAKdHJhaWxlcgo8PAovU2l6ZSAzMwovSW5mbyAxIDAgUgovUm9vdCAxOCAwIFIKPj4Kc3RhcnR4cmVmCjE2MzE5CiUlRU9GCg==
might be temporarily down or it may have moved permanently to a new web address.
ERR_INVALID_URL

Câu hỏi

1. Tôi đang làm gì sai?
2. Làm thế nào tôi có thể sửa chữa nó?

Làm cách nào để hiển thị nội dung của PDF trong HTML?

PDF có thể là Blob không?

Làm cách nào để mở một tệp blob trong pdf?

Làm cách nào để mở một tệp blob trong trình duyệt?