Когда пользователь загружает PDF-файл, я хочу отобразить его, а при щелчке PDF-файл должен отображаться на новой вкладке.

Question

Так что я пытаюсь сделать, когда пользователи загружают файл, я создаю новый блок html, добавляю его в div и хочу показать этот pdf. При нажатии на PDF-файл я хочу, чтобы он отображался на новой вкладке.

<label class="btn btn-secondary btn-pills waves-effect waves-themed" for="inputOtherPdfs">Add new PDF</label>
<input type="file" id="inputOtherPdfs" class="form-control-file" style="display:none;" accept="application/pdf" onchange="loadOtherPdf(event, 'otherPdfsDivId')">

        <div class="row" id="otherPdfsDivId">
            </div>

<script>

 function loadOtherPdf(event, id) {
    let html = "<div class='col-3' style='text-align:center' id='div_OtherPdf_" + someId + "'><a href='' target='_blank' name='OtherPdfs'> <img src='../Content /img/pdfLogo.png' style='width: auto; height: 100px; ' />" + event.target.files[0].name + "</a><div style='padding - top: 5px'><button style='width: 60 %; ' type='button' class='btn btn - outline - danger btn - pills waves - effect waves - themed right' >Șterge</button></div>  <br />  </div>";

    $('#' + id).append(html);
    let pdf = document.getElementById('div_OtherPdf_' + fileCount);

    let file = event.target.files[0];
}
<script/>

Я попытался поместить файл в sr c недавно созданного html:

let pdf = document.getElementById('div_OtherPdf_' + fileCount).children[1];
pdf.src = file;

Answer 1

Хм, не уверен, как это сделать с jQuery. Я бы следовал подходу, аналогичному Пример: показ миниатюр выбранных пользователем изображений , но вставка PDF-файла в iFrame (с использованием атрибута src data:application/pdf;base64,BASE64-STRING-STARTS-HERE). Вы можете использовать то же значение, что и href для <a> с target=_blank, что должно позволить открыть новую вкладку.

Если это работает, обязательно добавьте дополнительную меру безопасности чтобы укрепить вашу заявку.

Answer 2

Вы можете загрузить файл PDF в <object> вместо новой вкладки.

<object data="data:application/pdf;base64,YOURBASE64DATA" type="application/pdf"></object>

создать <object>, как указано выше, и загрузить event.target.files[0] в данные attribute.

EDIT: это может не работать на некоторых мобильных устройствах, PDF может не отображаться в теге object .