Вставить PDF Байт Данные в HTML

Это должно работать, но, похоже, я чего-то не хватает.Вставить PDF Байт Данные в HTML

У меня есть файл pdf на локальном диске. Очевидно, что Chrome и другие браузеры не могут получить этот локальный URL-адрес, поскольку он изолирован, поэтому у меня есть сервлет, который извлекает данные с локального диска и отправляет его обратно через вызов ajax веб-клиенту. Я не получаю никаких ошибок, и кажется, что программа просмотра PDF загружается, но сам файл не отображается. Я кодирую его заранее, но он все равно не сработает. Ниже я расскажу о своих многочисленных подходах, но я не буду включать код сервлета, поскольку он работает.

Попытка 1:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     $("#embedHolder").append("<object id='embedder' width='80%' height='600px'><embed width=100% height=100%" 
            + ' type="application/pdf"' 
            + ' src="data:application/pdf;base64,' 
            + base64EncodedPDF 
            + "></embed></object>"); 

      }); 
     } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
     }

Попытка 2:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     var obj = $('<object id="repObjID" type="application/pdf" width="100%" height="600" border="2"></object>'); 
     obj.attr('data',base64EncodedPDF); 
     var embed = $('<embed type="application/pdf"></embed>'); 
     embed.attr('src',base64EncodedPDF); 
     $('#repObjID').append(embed); 
     $("#docHolder").html(obj); 
    } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,    function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
}

источник

2016-08-01 Marcel Marino

1) Вы уверены, что ваш зритель PDF действительно принимает данные base64, закодированные в Src URL? 2) Как сервер получает данные с локального диска? Я предлагаю пользователю выбрать файл, который затем загружается (через AJAX?) В сервлет? –

Не совсем. Пользователь выбирает запись в базе данных, а на этой записи - URL-адрес, указывающий на локальный каталог. Затем сервер считывает данные с локального URL-адреса и преобразует их в байты, которые затем передаются клиенту посредством ответа. Я * думал, что это работает, но я смог открыть документ в новом окне полу-успешно. В pdf отображается и правильное количество страниц, но каждая страница полностью пуста. Что касается программы просмотра PDF, я использую по умолчанию хром. –

Вы можете создать двоичный файл [Blob] (https://developer.mozilla.org/en-US/docs/Web/API/Blob) (с типом контента), а затем создать [URL-адрес объекта] (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) и загрузить его в iframe. – Rudie

1. Загрузите двоичные данные с помощью AJAX, в ArrayBuffer

var xhr = new XMLHttpRequest; 
xhr.open('get', '/path/to/pdf, true); 
xhr.responseType = 'arraybuffer'; 
xhr.send();

2. Создать URL-адрес Blob и Object

var blob = new Blob([xhr.response], {type: 'application/pdf'}); 
var url = URL.createObjectURL(blob);

3. Загрузка URL в IFRAME

iframe.src = url;

Демо: https://webblocks.nl/tests/ajax-pdf.html

источник

2018-01-03 22:44:08 Rudie

ответ

Смежные вопросы