在HTML中嵌入通过输入文件元素打开的PDF

我有一个简单的web应用程序，我需要有人从文件服务器选择一个.pdf文件，然后在网页上显示该.pdf文件

我可以让用户通过类似

我还可以将.pdf嵌入iframe中，以便通过

---

但是如何显示用户从输入中选择的.pdf文件呢？有没有一种方法可以将输入值传递到iframe的src中？我可以在新选项卡或新html文件中打开.pdf文件，这样我就不必刷新整个页面了吗

对于任何需要帮助的人，我找到了一个适合我的解决方案

我为要上载的文件创建了一个输入。此输入调用下面定义的JS函数

然后创建了一个具有我想要的大小的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>

函数预览文件（）{
const preview=document.querySelector（'iframe'）；
const file=document.querySelector（'input[type=file]'）。files[0]；
const reader=new FileReader（）；
var filename=file.name；
reader.addEventListener（“加载”，函数（）{
//将文件转换为base64字符串
preview.src=reader.result；
}，假）；
如果（文件）{
reader.readAsDataURL（文件）；
}
}