Как запустить прямую загрузку PDF с JavaScript

Содержание

1 Требования
2 Скачать напрямую PDF с URL

В большинстве современных веб-приложений пользователь не использует устаревший браузер из-за основных требований и функций, которые предлагает веб-приложение. Это большое преимущество, когда мы говорим о технической стороне, поскольку у вас есть много новых доступных API. Одним из преимуществ является наличие Blobs и FileReader, которые правильно работают и могут использоваться для загрузки файлов непосредственно из JavaScript без перенаправления пользователя на новый веб-сайт.

В этой статье мы расскажем вам, как легко загрузить PDF-файл с веб-адреса в браузере.

Заметка

Для примеров мы собираемся использовать PDF-файл, размещенный на веб-сайте Mozilla Github IO, это абсолютно бесплатно и имеет заголовки CORS, так что его можно использовать везде для тестирования.

Требования

Вам понадобится библиотека FileSaver для достижения вашей цели. Эта библиотека поддерживает UMD (Universal Module Definition), поэтому вы можете использовать ее в браузере и получать к ней доступ из окна, или вы можете использовать ее как модуль с любым пакетом.

Если вы используете NPM, вы можете установить его в свой проект, используя:

npm install file-saver --save

И тогда вы можете просто потребовать модуль как:

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

Кроме того, вы можете скачать копию минимизированного скрипта и добавьте в ваш HTML-документ тег script:

И используйте это как:

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

Визит официальный репозиторий на Github для получения дополнительной информации об этой библиотеке.

Скачать напрямую PDF с URL

Благодаря FileSaver.js вы сможете легко сохранить данные файла в JavaScript для загрузки в вашем браузере. FileSaver.js реализует saveAs Интерфейс FileSaver в браузерах, которые изначально не поддерживают его. FileSaver.js является решением для сохранения файлов на стороне клиента и идеально подходит для веб-приложений, которым необходимо создавать файлы, или для сохранения конфиденциальной информации, которую не следует отправлять на внешний сервер.

В этом случае, если вы хотите сделать это из PDF-файла, который доступен на сервере, но по какой-то причине вы не хотите открывать для него новое окно, поэтому пользователю не нужно будет делать щелчок правой кнопкой мыши, сохраните PDF и т. Д., Вы можете легко использовать эту библиотеку для достижения этой цели. В следующем примере мы загружаем PDF-файл с простого URL-адреса. В зависимости от архитектуры вашего приложения PDF-файл может быть доступен только на определенных условиях на сервере, чтобы в конечном итоге его можно было обрабатывать и обрабатывать внутренним образом с помощью JavaScript:

var oReq = new XMLHttpRequest();
// The Endpoint of your server
var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
// Configure XMLHttpRequest
oReq.open("GET", URLToPDF, true);
// Important to use the blob response type
oReq.responseType = "blob";
// When the file request finishes
// Is up to you, the configuration for error events etc.
oReq.onload = function() {
// Once the file is downloaded, open a new window with the PDF
// Remember to allow the POP-UPS in your browser
var file = new Blob([oReq.response], {
type: 'application/pdf'
});
// Generate file download directly in the browser !
saveAs(file, "mypdffilename.pdf");
};
oReq.send();

После завершения загрузки файла процесс сохранения начинается автоматически. Обратите внимание, что если браузер не поддерживает Blob API, вы можете добавьте polify, чтобы решить эту неудобную.