jQueryを使用して新しいタブで開かれたBlob PDFのスラッグを変更する

JavaScript を使用して新しいタブで BLOB-PDF のスラグを変更する方法

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 ファイルのスラッグを変更できますか?
2. いいえ、 Blob オブジェクトは、ファイル名の直接割り当てをサポートしていません。を使用する必要があります。 download ダウンロード用の属性。
3. カスタム ファイル名を使用して新しいタブで BLOB を開くにはどうすればよいですか?
4. 新しいタブで開かれた BLOB には、カスタム スラグを直接含めることはできません。ダウンロードの場合は、 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 ではスラッグを直接変更することはできませんが、ダウンロードのファイル名の制御に役立つ download 属性などの回避策があります。

より高度な制御を行うには、サーバー側のアプローチで コンテンツの配置 ヘッダーを使用すると、ファイルが配信されるときに希望の名前が付けられるようにすることができます。プロジェクトの要件に応じて、クライアント側またはサーバー側のソリューションを効果的に適用できます。