Tukar Slug Blob PDF Dibuka dalam Tab Baharu Menggunakan jQuery

Mengendalikan Slug PDF Blob dalam Tab Baharu dengan JavaScript

Menjana PDF daripada halaman web adalah keperluan biasa dalam pembangunan web. Anda mungkin perlu mencipta PDF dinamik, membukanya dalam tab baharu dan menyediakan nama fail atau slug tersuai untuk fail tersebut. Walau bagaimanapun, bekerja dengan gumpalan JavaScript memberikan cabaran apabila ia datang untuk menukar slug fail.

Walaupun gumpalan adalah penting untuk mengendalikan kandungan yang boleh dimuat turun, satu had ialah ketidakupayaan untuk menetapkan atau menukar sifat nama fail secara langsung. Pembangun sering cuba memberikan nama atau nama fail kepada gumpalan semasa menjana fail, tetapi percubaan sedemikian biasanya gagal disebabkan oleh sekatan penyemak imbas.

Jika anda telah mencuba menetapkan sifat seperti gumpalan.nama atau blob.nama fail dalam kod anda tanpa kejayaan, anda tidak bersendirian. Ini adalah isu biasa yang dihadapi apabila cuba menyesuaikan tingkah laku gumpalan. Keperluan untuk membuka PDF yang dijana dengan slug tersuai boleh menjadikannya lebih mengecewakan.

Dalam artikel ini, kami akan meneroka kemungkinan penyelesaian dan penyelesaian untuk menjana PDF menggunakan gumpalan dalam JavaScript dan memastikan fail dibuka dalam tab baharu dengan slug tersuai yang betul. Kami juga akan melihat contoh kod praktikal untuk membimbing anda melalui proses ini.

Menjana PDF dengan Slug Tersuai Menggunakan JavaScript dan jQuery

Skrip yang disediakan memberi tumpuan kepada menangani cabaran membuka fail PDF yang dijana daripada halaman web dalam tab baharu dengan nama fail tersuai atau slug. Salah satu isu utama yang dihadapi oleh pembangun apabila bekerja dengan gumpalan dalam JavaScript ialah ketidakupayaan untuk menetapkan nama fail secara langsung, yang penting untuk menetapkan slug tersuai. Dalam penyelesaian kami, teknik utama melibatkan mencipta a Gumpalan daripada kandungan PDF, yang kami hasilkan secara dinamik. Menggunakan URL.createObjectURL() fungsi, kami menukar Blob ini menjadi sumber yang boleh dibuka atau dimuat turun oleh penyemak imbas.

Setelah URL Blob dibuat, kami menggunakan window.open() untuk memaparkan PDF dalam tab baharu, yang selalunya diperlukan dalam situasi di mana pengguna perlu pratonton atau mencetak dokumen. Oleh kerana gumpalan itu sendiri tidak menyokong penamaan fail, kami memintas had ini dengan mencipta elemen pautan tersembunyi dan menetapkan nama fail yang dikehendaki menggunakan muat turun atribut. Pautan tersembunyi ini kemudiannya "diklik" secara pemrograman untuk mencetuskan muat turun dengan nama fail yang betul. Gabungan kaedah ini ialah penyelesaian biasa untuk pengehadan penamaan gumpalan dalam JavaScript.

Untuk penyelesaian bahagian pelayan, kami menggunakan Node.js dan Express untuk menyampaikan fail PDF dengan nama fail tersuai secara langsung. Dengan memanfaatkan fs.createReadStream(), fail itu distrim kepada klien dengan cekap, membolehkan pelayan mengendalikan fail besar tanpa memuatkannya ke dalam memori sekaligus. The res.setHeader() arahan adalah penting di sini, kerana ia memastikan bahawa pengepala respons HTTP menentukan nama fail tersuai dan jenis MIME (aplikasi/pdf). Kaedah ini sesuai untuk aplikasi yang lebih kompleks di mana PDF dijana atau disimpan pada pelayan.

Skrip ini direka bentuk untuk menjadi modular dan boleh digunakan semula. Sama ada anda bekerja dalam persekitaran sebelah pelanggan menggunakan JavaScript atau penyelesaian bahagian belakang dengan Node.js, teknik ini memastikan bahawa PDF anda dihantar atau dibuka dengan nama fail yang betul. Kedua-dua pendekatan dioptimumkan untuk prestasi dan boleh mengendalikan senario di mana PDF dijana secara dinamik atau disimpan di bahagian pelayan. Dengan menyediakan kedua-dua penyelesaian hadapan dan belakang, ini memastikan fleksibiliti, membolehkan anda melaksanakan kaedah yang paling sesuai bergantung pada keperluan projek anda.

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

Memahami Had dan Penyelesaian untuk Nama Fail Blob dalam JavaScript

Salah satu cabaran utama apabila bekerja dengan Gumpalan objek dalam JavaScript adalah had sekitar menetapkan nama fail. Apabila menjana PDF atau sebarang jenis fail, gumpalan tidak menyokong kaedah langsung untuk menetapkan nama fail tersuai. Ini menjadi sangat bermasalah apabila cuba membuka fail ini dalam tab baharu atau mencetuskan muat turun dengan slug tertentu. Tingkah laku lalai penyemak imbas adalah untuk menjana nama sewenang-wenangnya, yang tidak selalunya mesra pengguna atau sesuai untuk konteks fail.

Untuk mengatasi had ini, pembangun boleh menggunakan HTML5 muat turun atribut, yang membolehkan untuk menentukan nama fail untuk fail yang sedang dimuat turun. Dengan mencipta elemen utama secara dinamik dalam JavaScript dan menetapkan muat turun atribut kepada nama fail yang dikehendaki, kami boleh mengawal nama fail apabila kandungan gumpalan dimuat turun. Walau bagaimanapun, kaedah ini tidak memberi kesan kepada nama apabila gumpalan dibuka dalam tab baharu, kerana ini dikawal oleh fungsi terbina dalam penyemak imbas untuk memaparkan URL gumpalan.

Pendekatan lain adalah untuk menyampaikan fail dari bahagian belakang menggunakan rangka kerja seperti Node.js atau Express, di mana pengepala tersuai boleh ditetapkan untuk mengawal nama fail fail yang dihantar kepada klien. The Content-Disposition header membolehkan anda menentukan nama fail tanpa mengira sama ada ia sedang dimuat turun atau dibuka dalam tab baharu. Kaedah ini lebih fleksibel untuk kandungan yang diberikan sebelah pelayan, tetapi untuk gumpalan JavaScript sisi klien, atribut muat turun ialah penyelesaian yang paling berkesan.