Promijenite slug Blob PDF-a otvorenog u novoj kartici pomoću jQueryja

Rukovanje Blob PDF puževima u novim karticama s JavaScriptom

Generiranje PDF-ova s ​​web stranice čest je zahtjev u web razvoju. Možda ćete morati izraditi dinamički PDF, otvoriti ga u novoj kartici i unijeti prilagođeni naziv ili naziv datoteke za datoteku. Međutim, rad s JavaScript mrljama predstavlja izazov kada se radi o promjeni sluga datoteke.

Iako su blobovi ključni za rukovanje sadržajem koji se može preuzeti, jedno ograničenje je nemogućnost izravnog postavljanja ili promjene svojstva naziva datoteke. Programeri često pokušavaju dodijeliti nazive ili nazive datoteka blobovima prilikom generiranja datoteka, ali takvi pokušaji obično ne uspijevaju zbog ograničenja preglednika.

Ako ste pokušali postaviti svojstva poput mrlja.ime ili blob.ime datoteke u svom kodu bez uspjeha, niste sami. Ovo je čest problem s kojim se suočavate kada pokušavate prilagoditi ponašanje bloba. Potreba za otvaranjem generiranog PDF-a pomoću prilagođenog puža može ovo učiniti još frustrirajućim.

U ovom ćemo članku istražiti moguća rješenja i zaobilazna rješenja za generiranje PDF-ova pomoću blobova u JavaScriptu i osiguravanje otvaranja datoteke u novoj kartici s ispravnim prilagođenim slagom. Također ćemo pogledati praktične primjere koda koji će vas voditi kroz ovaj proces.

Generiranje PDF-a s prilagođenim slugom koristeći JavaScript i jQuery

Pružene skripte usmjerene su na rješavanje izazova otvaranja PDF datoteke generirane s web-stranice u novoj kartici s prilagođenim nazivom datoteke ili slogom. Jedan od glavnih problema s kojima se programeri susreću kada rade s blobovima u JavaScriptu je nemogućnost izravnog dodjeljivanja naziva datoteke, što je bitno za postavljanje prilagođenog sluga. U našem rješenju ključna tehnika uključuje stvaranje a Mrlja iz PDF sadržaja koji dinamički generiramo. Korištenje URL.createObjectURL() funkciju, ovaj Blob pretvaramo u resurs koji preglednik može otvoriti ili preuzeti.

Nakon što se stvori Blob URL, koristimo window.open() za prikaz PDF-a u novoj kartici, što je često potrebno u situacijama kada korisnik treba pregledati ili ispisati dokument. Budući da sam blob ne podržava imenovanje datoteke, zaobilazimo ovo ograničenje stvaranjem skrivenog elementa veze i dodjeljivanjem željenog naziva datoteke pomoću preuzeti atribut. Zatim se programski "klikne" ova skrivena poveznica kako bi se pokrenulo preuzimanje s ispravnim nazivom datoteke. Ova kombinacija metoda uobičajeno je rješenje za ograničenje imenovanja blob-a u JavaScriptu.

Za rješenja na strani poslužitelja koristimo Node.js i Express za izravno posluživanje PDF datoteka s prilagođenim nazivom datoteke. Korištenjem fs.createReadStream(), datoteka se učinkovito prenosi klijentu, omogućujući poslužitelju da rukuje velikim datotekama bez njihovog učitavanja u memoriju odjednom. The res.setHeader() naredba je ovdje ključna jer osigurava da zaglavlja HTTP odgovora specificiraju prilagođeni naziv datoteke i MIME tip (application/pdf). Ova je metoda idealna za složenije aplikacije u kojima se PDF generira ili pohranjuje na poslužitelju.

Ove su skripte dizajnirane da budu modularne i za višekratnu upotrebu. Bilo da radite u okruženju na strani klijenta koristeći JavaScript ili pozadinsko rješenje sa Node.js, te tehnike osiguravaju isporuku ili otvaranje vaših PDF-ova s ​​ispravnim nazivom datoteke. Oba su pristupa optimizirana za performanse i mogu se nositi sa scenarijima u kojima se PDF-ovi generiraju dinamički ili pohranjuju na strani poslužitelja. Pružanjem i front-end i back-end rješenja, ovo osigurava fleksibilnost, omogućujući vam implementaciju najprikladnije metode ovisno o potrebama vašeg projekta.

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

Razumijevanje ograničenja i rješenja za Blob nazive datoteka u JavaScriptu

Jedan od glavnih izazova u radu sa Mrlja objekata u JavaScriptu je ograničenje oko postavljanja naziva datoteka. Prilikom generiranja PDF-a ili bilo koje vrste datoteke, blobovi sami po sebi ne podržavaju izravnu metodu za dodjeljivanje prilagođenog naziva datoteke. To postaje osobito problematično kada pokušavate otvoriti te datoteke u novoj kartici ili pokrenuti preuzimanje s određenim programom. Zadano ponašanje preglednika je generiranje proizvoljnog naziva, koji nije uvijek jednostavan za korištenje ili prikladno za kontekst datoteke.

Kako bi prevladali ovo ograničenje, programeri mogu koristiti HTML5 preuzeti atribut koji omogućuje definiranje naziva datoteke za preuzimanje. Dinamičkim stvaranjem elementa sidra u JavaScriptu i postavljanjem preuzeti željenom nazivu datoteke, možemo kontrolirati naziv datoteke kada se sadržaj blob datoteke preuzme. Međutim, ova metoda ne utječe na naziv kada se blob otvori u novoj kartici, budući da to kontrolira ugrađena funkcija preglednika za prikazivanje URL-ova blob-a.

Drugi pristup je posluživanje datoteke iz pozadine pomoću okvira poput Node.js ili Express, gdje se prilagođena zaglavlja mogu postaviti za kontrolu naziva datoteke poslane klijentu. The Content-Disposition zaglavlje vam omogućuje da navedete naziv datoteke bez obzira na to preuzima li se ili otvara u novoj kartici. Ova metoda je fleksibilnija za sadržaj prikazan na strani poslužitelja, ali za JavaScript blobove na strani klijenta, atribut preuzimanja je najučinkovitije rješenje.