Question

我正在尝试显示用户使用FileReader上传的pdf文件的内容，但我却得到了随机字符，但是我尝试读取上传的文本文件（.txt），并且工作正常。

修改：有人建议使用iframe显示pdf内容，但是我不确定如何将src =“”属性设置为上传的文件src url

这就是我使用iframe的方式：

 <iframe  id="frame" src="this should be the src of user input pdf file" style="width: 100%; height: 600px; border: none;"></iframe>

这是用户选择文件的html：

<b-form-file   input="file"  class="mb-2 m-2" @change="uploadFile"/>

文件变量：

data(){
      return {

        file: null,
}
}

uploadFile处理程序：

async uploadFile(ev){


           this.file=ev;
}

另一个显示内容的按钮：

<b-button class="ml-2"@click="displayArticle">Display Article</b-button>

displayArticle处理程序：

 displayArticle(){

           const reader= new FileReader()


           reader.onload=  function(){




             this.content=reader.result.toString();
             document.getElementById("fileContents").textContent=this.content;



//this will display the
 //content of the file in 
//fileContents div if its .txt file,
 //however i want to set the src attribute of 
//iframe to be the source of 
//the uploaded file from the user 
//to be able to display the pdf file
//by something like this:

             document.getElementById("frame").src=" source of uploaded file "




           }





           reader.readAsText(this.file.target.files[0]);



        }

<pre id="fileContents" style=" font-size: medium; font-weight: bold; padding: 5px ">  </pre>

Answer 1

您的文件阅读器并不关心文本的正确格式，而是仅显示构成该文件的原始内容。您可能想根据一条评论将文件嵌入页面中，或者您可能想要更改呈现给页面的文本的格式。无论哪种方式，您都应该使用内置工具来显示pdf ...这可能对您有帮助：

<iframe src="pdf-link"></iframe>

EDIT：保存用户上传到数据库的pdf的url；然后通过从数据库中检索网址来显示pdf。

用户使用文件阅读器显示上载的PDF文档的内容

1 个答案: