Как отобразить документ PDF в iframe с помощью Google Docs Viewer, хранящегося в хранилище Firebase?

Question

У меня есть iframe, в котором я хочу поместить предварительный просмотр моего PDF-документа, размещенного в хранилище Firebase, через Google Docs Viewer. Я создаю html-представление в javascript динамически и добавляю его методом jquery ('.someClass').html().

Я попытался подключить URL-адрес загрузки документа к iframe напрямую, он просто отлично работает и отображает предварительный просмотр.

Но я не могу заставить его отображать превью через Google Docs.

Я имел в виду, что это прекрасно работает:

....making  my html on the fly in javascript

myHtml+='<iframe src="'+downloadUrlFirebaseStorage+'" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);

Но я получаю ошибку:

....making  my html on the fly in javascript

myHtml+='<iframe src="https://docs.google.com/viewer?url='+downloadUrlFirebaseStorage+'&embedded=true" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);

Я получаю следующую ошибку:

Refused to display 'https://docs.google.com/gview?url=https://firebasestorage.googleapis.com/v0/b/habiganjmedicalcollege.appspot.com/o/documents%2FSampleDoc.pdf?alt=media&token=51df7c93-0c59-46a4-9229-267bc527705b%26embedded=true' in a frame because it set 'X-Frame-Options' to 'sameorigin'

Answer 1

Мне просто нужно было закодировать URI и изменить «% 26» на «&»:

var encodedUrl = encodeURIComponent(downloadUrlFirebaseStorage);

....making  my html on the fly in javascript

myHtml+='<iframe src="https://docs.google.com/viewer?url='+encodedUrl+'&embedded=true" width="100%"   frameborder="0"/>'

....making remaining  rest of my html on the fly in javascript

$('.someClass').html(myHtml);

Answer 2

попробуйте это:

<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px"  />

и перейдите на Ссылка