使用 jQuery 更改在新选项卡中打开的 Blob PDF 的 Slug

如何使用 JavaScript 在新选项卡中更改 Blob-PDF 的 Slug

使用 JavaScript 和 jQuery 的前端解决方案

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

使用 Node.js 后端生成 Blob PDF

使用 Node.js 和 Express 的后端解决方案

// 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

使用 HTML5 下载属性的替代方法

使用HTML5下载属性的前端解决方案

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

关于 JavaScript 中 Blob 和文件命名的常见问题

1. 我可以在 JavaScript 中更改 Blob 文件的 slug 吗？
2. 不， Blob 对象不支持直接分配文件名。您需要使用 download 下载属性。
3. 如何在新选项卡中使用自定义文件名打开 Blob？
4. 在新选项卡中打开的 Blob 不能直接具有自定义 slug。如需下载，您可以使用 download 属性。
5. 在 JavaScript 中处理 Blob 文件下载的最佳方法是什么？
6. 使用隐藏链接元素 download 属性来分配自定义文件名。
7. 我可以在服务器上设置文件名吗？
8. 是的，通过使用 res.setHeader() 和 Content-Disposition 在 Node.js 之类的后端中。
9. URL.createObjectURL() 方法如何与 Blob 一起使用？
10. 它生成可以打开或下载的 Blob URL，但不包括文件名设置。

关于 JavaScript Blob 中自定义文件名的最终想法

处理文件命名 斑点 JavaScript 中的对象可能具有挑战性，尤其是在新选项卡中打开文件时。尽管 blob 不允许直接更改 slug，但有一些解决方法，例如下载属性，可以帮助控制下载的文件名。

对于更高级的控制，服务器端方法，例如设置 内容处置 标头可用于确保文件在交付时具有所需的名称。根据您的项目要求，可以有效地应用客户端或服务器端解决方案。