Izmantojot jQuery, mainiet jaunā cilnē atvērtā lāse PDF failu

Blob PDF ložu apstrāde jaunās cilnēs, izmantojot JavaScript

PDF failu ģenerēšana no tīmekļa lapas ir izplatīta prasība tīmekļa izstrādē. Iespējams, jums būs jāizveido dinamisks PDF fails, jāatver tas jaunā cilnē un jānorāda failam pielāgots faila nosaukums vai slieds. Tomēr darbs ar JavaScript lāsēm rada izaicinājumu, ja runa ir par faila sliekšņa maiņu.

Lai gan lāse ir būtiska lejupielādējama satura apstrādei, viens no ierobežojumiem ir nespēja tieši iestatīt vai mainīt faila nosaukuma rekvizītu. Veidojot failus, izstrādātāji bieži mēģina piešķirt blobiem nosaukumus vai failu nosaukumus, taču šādi mēģinājumi parasti neizdodas pārlūkprogrammas ierobežojumu dēļ.

Ja esat mēģinājis iestatīt tādus rekvizītus kā lāse.nosaukums vai blob.filename savā kodā bez panākumiem, jūs neesat viens. Šī ir izplatīta problēma, ar kuru saskaras, mēģinot pielāgot lāse uzvedību. Nepieciešamība atvērt ģenerēto PDF failu, izmantojot pielāgotu sliedi, to var padarīt vēl nomāktu.

Šajā rakstā mēs izpētīsim iespējamos risinājumus un risinājumus PDF failu ģenerēšanai, izmantojot JavaScript blobs, un nodrošināsim, ka fails tiek atvērts jaunā cilnē ar pareizo pielāgoto elementu. Mēs apskatīsim arī praktiskus kodu piemērus, lai palīdzētu jums veikt šo procesu.

PDF ģenerēšana, izmantojot pielāgotu Slug, izmantojot JavaScript un jQuery

Piedāvātie skripti koncentrējas uz izaicinājumu, kas saistīts ar PDF faila atvēršanu, kas ģenerēts no tīmekļa lapas, jaunā cilnē ar pielāgotu faila nosaukumu vai elementu. Viena no galvenajām problēmām, ar ko izstrādātāji saskaras, strādājot ar lāsēm JavaScript, ir nespēja tieši piešķirt faila nosaukumu, kas ir būtiski, lai iestatītu pielāgotu sliņķi. Mūsu risinājumā galvenā tehnika ietver a Blob no PDF satura, ko mēs ģenerējam dinamiski. Izmantojot URL.createObjectURL() funkciju, mēs pārvēršam šo Blob par resursu, ko pārlūkprogramma var atvērt vai lejupielādēt.

Kad Blob URL ir izveidots, mēs izmantojam window.open() lai parādītu PDF failu jaunā cilnē, kas bieži ir nepieciešams situācijās, kad lietotājam ir nepieciešams priekšskatīt vai izdrukāt dokumentu. Tā kā pati lāse neatbalsta faila nosaukuma piešķiršanu, mēs apiet šo ierobežojumu, izveidojot slēptu saites elementu un piešķirot vajadzīgo faila nosaukumu, izmantojot lejupielādēt atribūts. Pēc tam šī slēptā saite tiek programmatiski "noklikšķināta", lai aktivizētu lejupielādi ar pareizo faila nosaukumu. Šī metožu kombinācija ir izplatīts risinājums JavaScript lāpu nosaukšanas ierobežojumam.

Servera puses risinājumiem mēs izmantojam Node.js un Express, lai tieši apkalpotu PDF failus ar pielāgotu faila nosaukumu. Izmantojot fs.createReadStream(), fails tiek efektīvi straumēts klientam, ļaujot serverim apstrādāt lielus failus, neielādējot tos atmiņā uzreiz. The res.setHeader() komandai šeit ir izšķiroša nozīme, jo tā nodrošina, ka HTTP atbildes galvenēs ir norādīts pielāgotais faila nosaukums un MIME veids (aplikācija/pdf). Šī metode ir ideāli piemērota sarežģītākām lietojumprogrammām, kurās PDF tiek ģenerēts vai saglabāts serverī.

Šie skripti ir izstrādāti tā, lai tie būtu modulāri un atkārtoti lietojami. Neatkarīgi no tā, vai strādājat klienta puses vidē, izmantojot JavaScript vai aizmugursistēmas risinājums ar Node.js, šīs metodes nodrošina, ka jūsu PDF faili tiek piegādāti vai atvērti ar pareizo faila nosaukumu. Abas pieejas ir optimizētas veiktspējai un var tikt galā ar scenārijiem, kad PDF faili tiek ģenerēti dinamiski vai saglabāti servera pusē. Nodrošinot gan priekšgala, gan aizmugures risinājumus, tiek nodrošināta elastība, ļaujot ieviest vispiemērotāko metodi atkarībā no jūsu projekta vajadzībām.

// 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');

Izpratne par ierobežojumiem un risinājumiem Blob failu nosaukumiem JavaScript

Viens no galvenajiem izaicinājumiem, strādājot ar Blob objekti JavaScript ir ierobežojums attiecībā uz failu nosaukumu iestatīšanu. Ģenerējot PDF vai jebkura veida failu, blobs pēc būtības neatbalsta tiešu metodi pielāgota faila nosaukuma piešķiršanai. Tas kļūst īpaši problemātiski, mēģinot atvērt šos failus jaunā cilnē vai aktivizēt lejupielādi, izmantojot konkrētu slieksni. Pārlūkprogrammas noklusējuma darbība ir ģenerēt patvaļīgu nosaukumu, kas ne vienmēr ir lietotājam draudzīgs vai piemērots faila kontekstam.

Lai pārvarētu šo ierobežojumu, izstrādātāji var izmantot HTML5 lejupielādēt atribūts, kas ļauj definēt faila nosaukumu lejupielādētajam failam. Dinamiski izveidojot enkura elementu JavaScript un iestatot lejupielādēt atribūtu vajadzīgajam faila nosaukumam, mēs varam kontrolēt faila nosaukumu, kad tiek lejupielādēts blob saturs. Tomēr šī metode neietekmē nosaukumu, kad lāse tiek atvērta jaunā cilnē, jo to kontrolē pārlūkprogrammā iebūvētā funkcionalitāte blobu vietrāžu URL renderēšanai.

Vēl viena pieeja ir faila apkalpošana no aizmugursistēmas, izmantojot līdzīgu sistēmu Node.js vai Express, kur var iestatīt pielāgotas galvenes, lai kontrolētu klientam nosūtītā faila nosaukumu. The Content-Disposition galvene ļauj norādīt faila nosaukumu neatkarīgi no tā, vai tas tiek lejupielādēts vai atvērts jaunā cilnē. Šī metode ir elastīgāka servera puses renderētajam saturam, bet klienta puses JavaScript lāsēm lejupielādes atribūts ir visefektīvākais risinājums.