Dosyaları İndirme (Axios ve Güvenlik kullanarak)
Axios ve bazı güvenlik araçlarını kullanarak dosya indirmek istediğinizde bu aslında daha da karmaşıktır. Başkalarının bunu çözmek için çok fazla zaman harcamasını önlemek için, size bu konuda yol göstermeme izin verin.
3 şey yapmanız gerekiyor:
1. Configure your server to permit the browser to see required HTTP headers
2. Implement the server-side service, and making it advertise the correct file type for the downloaded file.
3. Implementing an Axios handler to trigger a FileDownload dialog within the browser
Bu adımlar çoğunlukla uygulanabilir - ancak tarayıcının CORS ile ilişkisi nedeniyle önemli ölçüde karmaşıktır. Adım adım:
1. (HTTP) sunucunuzu yapılandırın
Taşıma güvenliği kullanılırken, bir tarayıcı içinde çalıştırılan JavaScript [tasarım gereği], gerçekte HTTP sunucusu tarafından gönderilen HTTP başlıklarının yalnızca 6'sına erişebilir. Sunucunun indirme için bir dosya adı önermesini istiyorsak, JavaScript'in önerilen dosya adının taşınacağı diğer başlıklara erişim vermesi için tarayıcıya "Tamam" olduğunu bildirmeliyiz.
Tartışma adına, sunucunun önerilen dosya adını X-Suggested-Filename adlı bir HTTP üstbilgisi içinde iletmesini istediğimizi varsayalım . HTTP sunucusu olduğu tarayıcıya bildirir Tamam aşağıdaki başlığıyla JavaScript / AXIOS bu alınan özel üstbilgi açığa çıkarmak için:
Access-Control-Expose-Headers: X-Suggested-Filename
HTTP sunucunuzu bu başlığı ayarlayacak şekilde yapılandırmanın tam yolu üründen ürüne değişir.
Bu standart başlıkların tam açıklaması ve ayrıntılı açıklaması için https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers adresine bakın .
2. Sunucu tarafı hizmeti uygulayın
Sunucu tarafı hizmet uygulamanız şimdi 2 şey gerçekleştirmelidir:
1. Create the (binary) document and assign correct ContentType to the response
2. Assign the custom header (X-Suggested-Filename) containing the suggested file name for the client
Bu, seçtiğiniz teknoloji yığınına bağlı olarak farklı şekillerde yapılır. Bir Excel raporu vermesi gereken JavaEE 7 standardını kullanarak bir örnek çizeceğim:
@GET
@Path("/report/excel")
@Produces("application/vnd.ms-excel")
public Response getAllergyAndPreferencesReport() {
// Create the document which should be downloaded
final byte[] theDocumentData = ....
// Define a suggested filename
final String filename = ...
// Create the JAXRS response
// Don't forget to include the filename in 2 HTTP headers:
//
// a) The standard 'Content-Disposition' one, and
// b) The custom 'X-Suggested-Filename'
//
final Response.ResponseBuilder builder = Response.ok(
theDocumentData, "application/vnd.ms-excel")
.header("X-Suggested-Filename", fileName);
builder.header("Content-Disposition", "attachment; filename=" + fileName);
// All Done.
return builder.build();
}
Hizmet artık ikili belgeyi (bu durumda bir Excel raporu) yayar, doğru içerik türünü ayarlar ve ayrıca belgeyi kaydederken kullanmak üzere önerilen dosya adını içeren özel bir HTTP üstbilgisi gönderir.
3. Alınan belge için bir Axios işleyicisi uygulayın
Burada birkaç tuzak var, bu nedenle tüm ayrıntıların doğru şekilde yapılandırıldığından emin olalım:
- Hizmet @GET'e (yani HTTP GET) yanıt verir, bu nedenle axios çağrısı 'axios.get (...)' olmalıdır.
- Belge bir bayt akışı olarak iletilir, bu nedenle axios'a yanıtı bir HTML5 Blobu olarak değerlendirmesini söylemelisiniz. (Yani responseType: 'blob' ).
- Bu durumda, dosya koruyucu JavaScript kitaplığı tarayıcı iletişim kutusunu açmak için kullanılır. Ancak başka bir tane seçebilirsin.
İskelet Axios uygulaması şu satırlarda bir şey olacaktır:
// Fetch the dynamically generated excel document from the server.
axios.get(resource, {responseType: 'blob'}).then((response) => {
// Log somewhat to show that the browser actually exposes the custom HTTP header
const fileNameHeader = "x-suggested-filename";
const suggestedFileName = response.headers[fileNameHeader];'
const effectiveFileName = (suggestedFileName === undefined
? "allergierOchPreferenser.xls"
: suggestedFileName);
console.log("Received header [" + fileNameHeader + "]: " + suggestedFileName
+ ", effective fileName: " + effectiveFileName);
// Let the user save the file.
FileSaver.saveAs(response.data, effectiveFileName);
}).catch((response) => {
console.error("Could not Download the Excel report from the backend.", response);
});