Gunakan JavaScript untuk memuat turun fail .png pada pelayan dan buat fail baharu dengan sambungan fail yang berbeza (.pdf)

Question

Kod tapak web saya disimpan dalam bahagian belakang yang sangat rumit dan buruk. Malangnya, mereka mengunci pengepala kandungan dengan sangat ketat, sebarang pautan fail yang berakhir dengan .pdf hanya boleh diakses melalui gesaan muat turun UI, mereka tidak membenarkan strong>fail PDF. Pemikiran semasa saya ialah mungkin saya boleh memuat naik fail ke pelayan dan menamakannya semula kepada file.pdf.png (ini nampaknya membenarkannya dengan memenuhi syarat pengepala kandungan pelayan untuk menjadikannya kelihatan seperti jenis fail .png Penyemak imbas memuat turun fail ke dalam memori). Saya kemudiannya ingin dapat mencipta fail baharu dalam JavaScript dengan menjadikan fail itu boleh dimuat turun (Dalam Memori). Satu pendekatan yang dicadangkan di tempat lain ialah base64 mengekod kandungan fail .png yang rosak, kemudian mencipta fail baharu dalam JavaScript berdasarkan kandungan base64 yang dinyahkod dan memberikannya nama sambungan .pdf berfungsi sebagai fail PDF dan disimpan dalam ingatan supaya pengguna tidak perlu memuat turun apa-apa ke peranti mereka. Matlamat akhir adalah untuk mendapatkan semula fail dalam ingatan (dari bahagian belakang pengguna) dan memaparkannya menggunakan pemapar PDF terbina dalam penyemak imbas.

//Pelayan mempunyai pilihan untuk memuat naik fail //Dengan mengandaikan bahawa apa yang anda muat naik sebenarnya adalah fail PDF, tetapi dengan sambungan .png dilampirkan pada penghujung, //Jadi pautan ke fail ini akan kelihatan seperti https://the-website.com/file.pdf.png

//Sekarang saya perlu dapat mendapatkan semula fail ini di latar belakang dan diharapkan menyimpannya dalam ingatan supaya pengguna tidak perlu berinteraksi dengan pop timbul muat turun UI.

//Kemudian, dengan beberapa cara, saya perlu mengekstrak kandungan fail (file.pdf.png) dan mencipta fail PDF yang sah berdasarkan fail dengan sambungan fail pseudo, fail yang terhasil mestilah file.pdf . Fail ini perlu disimpan dalam ingatan supaya saya boleh melihatnya dalam halaman web menggunakan sesuatu seperti atau apa sahaja yang paling berkesan untuk melihat PDF dalam pelbagai penyemak imbas, tetapi saya tidak boleh memaksa The pengguna memasukkan pop timbul UI atau memuat turun ke peranti mereka (saya hanya mahu bekerja dalam ingatan).

Answer 1

Pelanjutan fail sebenarnya tidak ada kaitan dengan ini... Content-TypePengepalanya.

Berdasarkan penerangan anda, saya rasa apabila mendapatkan fail PDF, pelayan tidak menggunakan jenis yang betul dalam respons, sebaliknya menghantarnya sebagai application/octet-stream atau jenis lain. (Ini adalah jenis biasa dan pelayar memuat turunnya secara lalai.)

Terdapat beberapa cara untuk menyelesaikan masalah ini. Salah satu cara ialah menggunakan ServiceWorker untuk mengatasi Content-Type pengepala seperti yang diperlukan. Walau bagaimanapun, ini tidak selalu berfungsi. Penyemak imbas sering melumpuhkan pekerja perkhidmatan apabila halaman terpaksa dimuat semula atau apabila mod privasi didayakan.

Satu lagi pendekatan yang lebih dekat dengan apa yang anda cadangkan ialah mendapatkan PDF dalam ingatan dalam JavaScript. Anda boleh melakukan ini menggunakan API Ambil, kemudian buat URL Blob dan biarkan penyemak imbas memuat turunnya. Belum diuji lagi, tetapi inilah intipatinya:

const res = await fetch('https://example.com/doc.pdf.fake-ext');
if (!res.ok) {
  throw new Error(`${res.status} ${res.statusText}`);
}

const blob = await res.blob();
const blobUrl = URL.createObjectURL(blob);

// 现在，您可以直接链接或重定向到`blobUrl`。
// 完成后一定要释放它，使用URL.revokeObjectURL()。

Sila ambil perhatian bahawa ini mungkin tidak berfungsi untuk dokumen yang sangat besar. Dokumen kecil tiada masalah.

Juga ambil perhatian bahawa tidak semua penyemak imbas boleh memaparkan PDF, dan tidak semua sistem dikonfigurasikan untuk membenarkan penyemak imbas memaparkan PDF sendiri.