Naudodami jQuery pakeiskite naujame skirtuke atidaryto blob PDF failą

Blob PDF šliužo tvarkymas naujuose skirtukuose naudojant „JavaScript“.

PDF failų generavimas iš tinklalapio yra įprastas interneto kūrimo reikalavimas. Gali reikėti sukurti dinaminį PDF failą, atidaryti jį naujame skirtuke ir pateikti pasirinktinį failo pavadinimą arba rinkmeną. Tačiau darbas su „JavaScript“ dėmėmis yra iššūkis, kai reikia pakeisti failo šliužą.

Nors dėmės yra būtinos norint tvarkyti atsisiunčiamą turinį, vienas apribojimas yra nesugebėjimas tiesiogiai nustatyti arba pakeisti failo pavadinimo ypatybės. Kūrėjai dažnai bando priskirti pavadinimus ar failų pavadinimus blobams generuodami failus, tačiau tokie bandymai dažniausiai nepavyksta dėl naršyklės apribojimų.

Jei bandėte nustatyti tokias savybes kaip blob.name arba blob.filename savo kode be sėkmės, jūs nesate vieni. Tai yra dažna problema, su kuria susiduriama bandant tinkinti blob elgesį. Dėl poreikio atidaryti sugeneruotą PDF naudojant pasirinktinį šliužą tai gali būti dar labiau varginantis.

Šiame straipsnyje išnagrinėsime galimus sprendimus ir būdus, kaip generuoti PDF failus naudojant „JavaScript“ dėmeles ir užtikrinti, kad failas būtų atidarytas naujame skirtuke su tinkamu tinkintu šliužu. Taip pat pažvelgsime į praktinius kodo pavyzdžius, kurie padės jums atlikti šį procesą.

PDF generavimas naudojant „Custom Slug“ naudojant „JavaScript“ ir „jQuery“.

Pateiktuose scenarijuose pagrindinis dėmesys skiriamas iššūkiui atidaryti iš tinklalapio sugeneruotą PDF failą naujame skirtuke su pasirinktu failo pavadinimu arba šliužu. Viena iš pagrindinių problemų, su kuria susiduria kūrėjai dirbdami su „JavaScript“ dėmėmis, yra nesugebėjimas tiesiogiai priskirti failo pavadinimo, o tai būtina norint nustatyti pasirinktinį šliužą. Mūsų sprendime pagrindinė technika apima a Blob iš PDF turinio, kurį generuojame dinamiškai. Naudojant URL.createObjectURL() funkciją, konvertuojame šį Blob į šaltinį, kurį naršyklė gali atidaryti arba atsisiųsti.

Sukūrę Blob URL, naudojame window.open() kad būtų rodomas PDF naujame skirtuke, kuris dažnai reikalingas tais atvejais, kai vartotojui reikia peržiūrėti arba spausdinti dokumentą. Kadangi pats blobas nepalaiko failo pavadinimo, mes apeiname šį apribojimą sukurdami paslėptą nuorodos elementą ir priskirdami norimą failo pavadinimą naudodami parsisiųsti atributas. Tada ši paslėpta nuoroda programiškai „paspaudžiama“, kad būtų paleistas atsisiuntimas tinkamu failo pavadinimu. Šis metodų derinys yra įprastas „JavaScript“ blob pavadinimų apribojimo sprendimas.

Serverio sprendimams naudojame Node.js ir Express, kad tiesiogiai pateiktume PDF failus su pasirinktu failo pavadinimu. Naudojant fs.createReadStream(), failas efektyviai perduodamas klientui, todėl serveris gali tvarkyti didelius failus neįkeliant jų į atmintį iš karto. The res.setHeader() Komanda čia yra labai svarbi, nes ji užtikrina, kad HTTP atsako antraštėse būtų nurodytas pasirinktinis failo pavadinimas ir MIME tipas (application/pdf). Šis metodas idealiai tinka sudėtingesnėms programoms, kai PDF yra generuojamas arba saugomas serveryje.

Šie scenarijai sukurti taip, kad būtų moduliniai ir pakartotinai naudojami. Nesvarbu, ar dirbate kliento aplinkoje, naudojant JavaScript arba backend sprendimas su Node.js, šie metodai užtikrina, kad jūsų PDF failai būtų pristatomi arba atidaromi tinkamu failo pavadinimu. Abu metodai yra optimizuoti našumui ir gali susidoroti su scenarijais, kai PDF failai generuojami dinamiškai arba saugomi serveryje. Teikdami tiek priekinius, tiek galinius sprendimus, tai užtikrina lankstumą, leidžiantį įgyvendinti tinkamiausią metodą, atsižvelgiant į jūsų projekto poreikius.

// Function to generate and open PDF in a new tab with custom filename
function openPDFWithCustomName(data, filename) {
  // Create a Blob object from the data (PDF content)
  var blob = new Blob([data], { type: 'application/pdf' });
  // Create a URL for the Blob object
  var blobURL = window.URL.createObjectURL(blob);
  // Create a temporary link to trigger the download
  var link = document.createElement('a');
  link.href = blobURL;
  link.download = filename; // Custom slug or filename
  // Open in a new tab
  window.open(blobURL, '_blank');
}

// Example usage: data could be the generated PDF content
var pdfData = '...'; // Your PDF binary data here
openPDFWithCustomName(pdfData, 'custom-slug.pdf');

// Require necessary modules
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// Serve generated PDF with custom slug
app.get('/generate-pdf', (req, res) => {
  const pdfFilePath = path.join(__dirname, 'test.pdf');
  res.setHeader('Content-Disposition', 'attachment; filename="custom-slug.pdf"');
  res.setHeader('Content-Type', 'application/pdf');
  const pdfStream = fs.createReadStream(pdfFilePath);
  pdfStream.pipe(res);
});

// Start the server
app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// To test, navigate to http://localhost:3000/generate-pdf

// Function to open PDF in new tab with custom filename using download attribute
function openPDFInNewTab(data, filename) {
  var blob = new Blob([data], { type: 'application/pdf' });
  var url = window.URL.createObjectURL(blob);
  var link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click(); // Triggers the download
  window.open(url, '_blank'); // Opens PDF in a new tab
}

// Example call
var pdfData = '...'; // PDF binary content
openPDFInNewTab(pdfData, 'new-slug.pdf');

Blob failų pavadinimų „JavaScript“ apribojimų ir sprendimų supratimas

Vienas iš pagrindinių iššūkių dirbant su Blob Objektai „JavaScript“ yra failų pavadinimų nustatymo apribojimas. Generuojant PDF arba bet kokio tipo failą, blobs iš esmės nepalaiko tiesioginio pasirinkto failo pavadinimo priskyrimo metodo. Tai tampa ypač problematiška bandant atidaryti šiuos failus naujame skirtuke arba suaktyvinti atsisiuntimą naudojant konkrečią šliuzą. Numatytasis naršyklės elgesys yra sugeneruoti savavališką pavadinimą, kuris ne visada yra patogus vartotojui arba tinkamas failo kontekstui.

Norėdami įveikti šį apribojimą, kūrėjai gali naudoti HTML5 parsisiųsti atributas, leidžiantis apibrėžti atsisiunčiamo failo pavadinimą. Dinamiškai sukūrę inkaro elementą „JavaScript“ ir nustatydami parsisiųsti atributas norimam failo pavadinimui, mes galime valdyti failo pavadinimą, kai atsisiunčiamas blob turinys. Tačiau šis metodas neturi įtakos pavadinimui, kai blobas atidaromas naujame skirtuke, nes tai valdo naršyklėje integruota blob URL pateikimo funkcija.

Kitas būdas yra pateikti failą iš užpakalinės programos naudojant tokią sistemą kaip Node.js arba Express, kur galima nustatyti pasirinktines antraštes, kad būtų galima valdyti klientui siunčiamo failo pavadinimą. The Content-Disposition antraštė leidžia nurodyti failo pavadinimą neatsižvelgiant į tai, ar jis atsisiunčiamas, ar atidaromas naujame skirtuke. Šis metodas yra lankstesnis serverio pusėje pateiktam turiniui, tačiau kliento pusės „JavaScript“ blobams atsisiuntimo atributas yra efektyviausias sprendimas.