Muutke jQuery abil uuel vahelehel avatud Blob PDF-i näpunäidet

Blob PDF nälkjate käsitlemine uutel vahekaartidel JavaScriptiga

Veebilehelt PDF-failide loomine on veebiarenduses tavaline nõue. Võimalik, et peate looma dünaamilise PDF-faili, avama selle uuel vahelehel ja andma failile kohandatud failinime või nime. Kuid JavaScripti plekkidega töötamine on faili nälkja muutmisel väljakutse.

Kuigi plekid on allalaaditava sisu käsitlemiseks hädavajalikud, on üheks piiranguks võimetus failinime atribuuti otse määrata või muuta. Arendajad püüavad failide genereerimisel sageli blobidele nimesid või failinimesid määrata, kuid sellised katsed ebaõnnestuvad tavaliselt brauseri piirangute tõttu.

Kui olete proovinud määrata atribuute nagu blob.name või blob.failinimi oma koodis edutult, te pole üksi. See on levinud probleem, millega puututakse kokku blob-käitumise kohandamisel. Vajadus avada loodud PDF kohandatud nälkjaga võib selle masendavamaks muuta.

Selles artiklis uurime võimalikke lahendusi ja lahendusi PDF-ide genereerimiseks JavaScripti plekkide abil ning tagamaks, et fail avaneks uuel vahelehel õige kohandatud näpunäidetega. Vaatame ka praktilisi koodinäiteid, mis juhendavad teid selles protsessis.

PDF-i genereerimine kohandatud nälkjaga JavaScripti ja jQuery abil

Pakutud skriptid keskenduvad veebilehelt loodud PDF-faili avamise väljakutsele uuel vahekaardil kohandatud failinime või näpunäidetega. Üks peamisi probleeme, millega arendajad JavaScriptis plekkidega töötades kokku puutuvad, on suutmatus määrata otse failinime, mis on kohandatud nälkja seadistamiseks hädavajalik. Meie lahenduses hõlmab võtmetehnika loomist a Blob PDF-i sisust, mille loome dünaamiliselt. Kasutades URL.createObjectURL() funktsiooni, teisendame selle Blobi ressursiks, mille brauser saab avada või alla laadida.

Kui Blobi URL on loodud, kasutame window.open() PDF-i kuvamiseks uuel vahekaardil, mis on sageli vajalik olukordades, kus kasutajal on vaja dokumenti eelvaadet vaadata või printida. Kuna blob ise ei toeta failile nime andmist, siis eirame seda piirangut, luues peidetud lingielemendi ja määrates soovitud failinime alla laadida atribuut. Sellel peidetud lingil klõpsatakse seejärel programmiliselt, et käivitada õige failinimega allalaadimine. See meetodite kombinatsioon on levinud lahendus blobi nimetamise piirangule JavaScriptis.

Serveripoolsete lahenduste puhul kasutame kohandatud failinimega PDF-failide otse edastamiseks Node.js-i ja Expressi. Kasutades fs.createReadStream(), edastatakse fail tõhusalt kliendile, võimaldades serveril käsitleda suuri faile ilma neid korraga mällu laadimata. The res.setHeader() käsk on siin ülioluline, kuna see tagab, et HTTP vastuse päised määravad kohandatud failinime ja MIME tüübi (rakendus/pdf). See meetod sobib ideaalselt keerukamate rakenduste jaoks, kus PDF-fail genereeritakse või salvestatakse serverisse.

Need skriptid on loodud olema modulaarsed ja korduvkasutatavad. Olenemata sellest, kas töötate kliendipoolses keskkonnas, kasutades JavaScript või taustalahendus Node.js, tagavad need tehnikad, et teie PDF-id tarnitakse või avatakse õige failinimega. Mõlemad lähenemisviisid on optimeeritud jõudluse jaoks ja saavad hakkama stsenaariumidega, kus PDF-failid genereeritakse dünaamiliselt või salvestatakse serveri poolel. Pakkudes nii esi- kui ka tagaotsa lahendusi, tagab see paindlikkuse, võimaldades teil rakendada kõige sobivamat meetodit vastavalt teie projekti vajadustele.

// 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-failinimede piirangute ja lahenduste mõistmine JavaScriptis

Üks peamisi väljakutseid töötamisel Blob objektid JavaScriptis on failinimede seadmise piirang. PDF-i või mis tahes failitüübi loomisel ei toeta plekid olemuselt otsest meetodit kohandatud failinime määramiseks. See muutub eriti problemaatiliseks, kui proovite neid faile uuel vahelehel avada või käivitada allalaadimine konkreetse näpunäidetega. Brauseri vaikekäitumine on suvalise nime genereerimine, mis ei ole alati kasutajasõbralik ega faili konteksti sobiv.

Selle piirangu ületamiseks saavad arendajad kasutada HTML5 alla laadida atribuut, mis võimaldab määrata allalaaditavale failile failinime. Luues ankurelemendi dünaamiliselt JavaScriptis ja seadistades alla laadida atribuut soovitud failinimele, saame blobi sisu allalaadimisel kontrollida failinime. See meetod ei mõjuta aga nime, kui blob avatakse uuel vahelehel, kuna seda juhib brauseri sisseehitatud funktsioon blobi URL-ide renderdamiseks.

Teine lähenemisviis on faili teenindamine taustaprogrammist, kasutades raamistikku nagu Node.js või Express, kus saab seadistada kohandatud päiseid, et juhtida kliendile saadetud faili nime. The Content-Disposition päis võimaldab määrata faili nime sõltumata sellest, kas seda laaditakse alla või avatakse uuel vahelehel. See meetod on serveripoolse renderdatud sisu puhul paindlikum, kuid kliendipoolsete JavaScripti blobide puhul on allalaadimisatribuut kõige tõhusam lahendus.