Я пытаюсь отобразить содержимое файла PDF, загруженного пользователем с помощью FileReader, но вместо этого я получаю случайные символы, однако я попытался прочитать загруженный текстовый файл (.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>
displayАртикул статьи:
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]);
}
<code><pre id="fileContents" style=" font-size: medium; font-weight: bold; padding: 5px ">