Встраивание PDF, открытого через элемент входного файла, в HTML

Question

У меня есть простое веб-приложение, и мне нужно, чтобы кто-то выбрал .pdf на файловом сервере, а затем отобразил этот .pdf на веб-странице.

Я могу заставить пользователя выбрать .pdf через что-то вроде <input type="file" id="myFile">

Я также могу встроить .pdf в iframe для удобного отображения в веб-приложении с помощью <iframe src="//path/to/file.pdf" width="100%" height="500px"></iframe>

Но как мне отобразить .pdf, выбранный пользователем со входа? Есть ли способ передать значение ввода в sr c iframe? Могу ли я открыть .pdf на новой вкладке или в новом файле html, чтобы не обновлять sh всю страницу?

Answer 1

Для тех, кому нужна помощь, я нашел решение, которое сработало для меня.

Я создал входные данные для файла, который хочу загрузить. Этот ввод вызывает функцию JS, которая определена ниже.

<input type="file" id="file-open" onchange="previewFile()" hidden="hidden" accept=".pdf"><br>

Затем создается iframe с размером, который я хотел

<iframe src="" id="iframe-pdf" width="1200px" height="800px"></iframe>

Наконец, я использовал JavaScript, чтобы преобразовать файл в base64 и использовать FileReader, чтобы открыть файл в iframe

function previewFile() {
        const preview = document.querySelector('iframe');
        const file = document.querySelector('input[type=file]').files[0];
        const reader = new FileReader();
        var filename = file.name;

        reader.addEventListener("load", function () {
          // convert file to base64 string
          preview.src = reader.result;
        }, false);

        if (file) {
          reader.readAsDataURL(file);
        }

      }
      </script>