Промените ознаку блоб ПДФ-а отвореног у новој картици користећи јКуери

Руковање блоб ПДФ пужевима у новим картицама помоћу ЈаваСцрипт-а

Генерисање ПДФ-ова са веб странице је уобичајен захтев у веб развоју. Можда ћете морати да креирате динамички ПДФ, да га отворите у новој картици и да наведете прилагођено име датотеке или ознаку за датотеку. Међутим, рад са ЈаваСцрипт блобс-овима представља изазов када је у питању промена пужеве датотеке.

Иако су блоб-ови неопходни за руковање садржајем за преузимање, једно од ограничења је немогућност директног постављања или промене својства имена датотеке. Програмери често покушавају да доделе имена или називе датотека блобовима када генеришу датотеке, али такви покушаји обично не успевају због ограничења претраживача.

Ако сте покушали да подесите својства као што су блоб.наме или блоб.филенаме у свом коду без успеха, нисте сами. Ово је чест проблем са којим се суочавате када покушавате да прилагодите понашање мрља. Потреба за отварањем генерисаног ПДФ-а са прилагођеним пужем може ово учинити још фрустрирајућим.

У овом чланку ћемо истражити потенцијална решења и заобилазна решења за генерисање ПДФ-ова коришћењем блоб-ова у ЈаваСцрипт-у и обезбеђивање отварања датотеке на новој картици са исправним прилагођеним улошком. Такође ћемо погледати практичне примере кода који ће вас водити кроз овај процес.

Генерисање ПДФ-а са Цустом Слуг користећи ЈаваСцрипт и јКуери

Скрипте су се фокусирале на решавање изазова отварања ПДФ датотеке генерисане са веб странице у новој картици са прилагођеним именом датотеке или пушком. Један од главних проблема са којима се програмери сусрећу када раде са блобовима у ЈаваСцрипт-у је немогућност директног додељивања назива датотеке, што је од суштинског значаја за подешавање прилагођеног пужева. У нашем решењу, кључна техника подразумева креирање а Блоб из ПДФ садржаја, који генеришемо динамички. Коришћењем УРЛ.цреатеОбјецтУРЛ() функцију, претварамо овај Блоб у ресурс који прегледач може да отвори или преузме.

Када се креира Блоб УРЛ, користимо га виндов.опен() да прикажете ПДФ у новој картици, што је често потребно у ситуацијама када корисник треба да прегледа или одштампа документ. Пошто сама блоб не подржава именовање датотеке, ми заобилазимо ово ограничење креирањем скривеног елемента везе и додељивањем жељеног имена датотеке помоћу преузимање атрибут. На ову скривену везу се затим програмски „кликне“ да би се покренуло преузимање са тачним именом датотеке. Ова комбинација метода је уобичајено решење за ограничење именовања блобова у ЈаваСцрипт-у.

За решења на страни сервера, користимо Ноде.јс и Екпресс да директно сервирамо ПДФ датотеке са прилагођеним именом датотеке. Коришћењем фс.цреатеРеадСтреам(), датотека се ефикасно преноси до клијента, омогућавајући серверу да рукује великим датотекама без њиховог учитавања у меморију одједном. Тхе рес.сетХеадер() команда је овде кључна, јер осигурава да заглавља ХТТП одговора специфицирају прилагођено име датотеке и МИМЕ тип (апплицатион/пдф). Овај метод је идеалан за сложеније апликације где се ПДФ генерише или чува на серверу.

Ове скрипте су дизајниране да буду модуларне и за вишекратну употребу. Без обзира да ли радите у окружењу на страни клијента користећи ЈаваСцрипт или позадинско решење са Ноде.јс, ове технике осигуравају да се ваши ПДФ-ови испоручују или отварају са исправним именом датотеке. Оба приступа су оптимизована за перформансе и могу да обрађују сценарије у којима се ПДФ-ови генеришу динамички или чувају на страни сервера. Пружајући и фронт-енд и бацк-енд решења, ово обезбеђује флексибилност, омогућавајући вам да примените најприкладнији метод у зависности од потреба вашег пројекта.

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

Разумевање ограничења и решења за Блоб имена датотека у ЈаваСцрипт-у

Један од главних изазова у раду са Блоб објеката у ЈаваСцрипт-у је ограничење око подешавања имена датотека. Када генеришете ПДФ или било који тип датотеке, блоб-ови инхерентно не подржавају директну методу за додељивање прилагођеног имена датотеке. Ово постаје посебно проблематично када покушавате да отворите ове датотеке на новој картици или покренете преузимање помоћу одређеног пужа. Подразумевано понашање претраживача је да генерише произвољно име, које није увек прилагођено кориснику или прикладно за контекст датотеке.

Да би превазишли ово ограничење, програмери могу да користе ХТМЛ5 преузимање атрибут, који омогућава дефинисање назива датотеке за датотеку која се преузима. Динамичким креирањем сидреног елемента у ЈаваСцрипт-у и постављањем преузимање атрибута жељеном имену датотеке, можемо контролисати име датотеке када се преузме садржај блоб-а. Међутим, овај метод не утиче на име када се блоб отвори у новој картици, јер то контролише уграђена функционалност прегледача за приказивање УРЛ-ова блоб-а.

Други приступ је послуживање датотеке из позадине користећи оквир попут Ноде.јс или Екпресс, где се прилагођена заглавља могу подесити да контролишу име датотеке која се шаље клијенту. Тхе Content-Disposition заглавље вам омогућава да наведете име датотеке без обзира да ли се преузима или отвара у новој картици. Овај метод је флексибилнији за садржај који се приказује на страни сервера, али за ЈаваСцрипт блобове на страни клијента, атрибут преузимања је најефикасније решење.