Могу ли я просмотреть и распечатать файл с использованием JS без загрузки файла на сервер?

Question

Я хочу загрузить отдельные файлы, а затем просмотреть и распечатать эти файлы без загрузки сервера.Если пользователь нажмет кнопку «Отправить», отправьте эти файлы на сервер.

Exp:

<p>
    <input type="file" id="file1">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file2">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file3">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<p>
    <input type="file" id="file4">
    <img src="">Show thumbnail here
    <button class="print">Print</button>
</p>

<button>Send All Files to Server</button>

Пример скрипки

Могу ли я сделать этос использованием только vanilla JS без стороннего приложения?

Answer 1

Вы можете читать файлы, используя File Reader API , затем рисовать их в canvas , иметь CSS только для печати, который будет скрыт (display: none) все элементы, кроме холста.