JavaScript ਨਾਲ ਨਵੀਆਂ ਟੈਬਾਂ ਵਿੱਚ ਬਲੌਬ ਪੀਡੀਐਫ ਸਲੱਗਸ ਨੂੰ ਸੰਭਾਲਣਾ
ਵੈਬ ਪੇਜ ਤੋਂ PDF ਬਣਾਉਣਾ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਆਮ ਲੋੜ ਹੈ। ਤੁਹਾਨੂੰ ਇੱਕ ਡਾਇਨਾਮਿਕ PDF ਬਣਾਉਣ, ਇਸਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਣ, ਅਤੇ ਫਾਈਲ ਲਈ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਜਾਂ ਸਲੱਗ ਪ੍ਰਦਾਨ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਹਾਲਾਂਕਿ, JavaScript ਬਲੌਬਸ ਨਾਲ ਕੰਮ ਕਰਨਾ ਇੱਕ ਚੁਣੌਤੀ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜਦੋਂ ਇਹ ਫਾਈਲ ਦੇ ਸਲੱਗ ਨੂੰ ਬਦਲਣ ਦੀ ਗੱਲ ਆਉਂਦੀ ਹੈ.
ਜਦੋਂ ਕਿ ਡਾਉਨਲੋਡ ਕਰਨ ਯੋਗ ਸਮਗਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਬਲੌਬ ਜ਼ਰੂਰੀ ਹਨ, ਇੱਕ ਸੀਮਾ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਫਾਈਲ ਨਾਮ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸੈਟ ਕਰਨ ਜਾਂ ਬਦਲਣ ਦੀ ਅਯੋਗਤਾ ਹੈ। ਡਿਵੈਲਪਰ ਅਕਸਰ ਫਾਈਲਾਂ ਤਿਆਰ ਕਰਨ ਵੇਲੇ ਬਲੌਬ ਨੂੰ ਨਾਮ ਜਾਂ ਫਾਈਲ ਨਾਮ ਦੇਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਨ, ਪਰ ਅਜਿਹੀਆਂ ਕੋਸ਼ਿਸ਼ਾਂ ਆਮ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਪਾਬੰਦੀਆਂ ਕਾਰਨ ਅਸਫਲ ਹੋ ਜਾਂਦੀਆਂ ਹਨ।
ਜੇ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੈੱਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਹੈ ਜਿਵੇਂ ਕਿ ਜਾਂ ਸਫਲਤਾ ਤੋਂ ਬਿਨਾਂ ਤੁਹਾਡੇ ਕੋਡ ਵਿੱਚ, ਤੁਸੀਂ ਇਕੱਲੇ ਨਹੀਂ ਹੋ। ਬਲੌਬ ਵਿਵਹਾਰ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ ਇਹ ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਹੈ। ਇੱਕ ਕਸਟਮ ਸਲੱਗ ਨਾਲ ਤਿਆਰ ਕੀਤੀ PDF ਨੂੰ ਖੋਲ੍ਹਣ ਦੀ ਲੋੜ ਇਸ ਨੂੰ ਹੋਰ ਨਿਰਾਸ਼ਾਜਨਕ ਬਣਾ ਸਕਦੀ ਹੈ।
ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ JavaScript ਵਿੱਚ ਬਲੌਬਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ PDF ਬਣਾਉਣ ਲਈ ਸੰਭਾਵੀ ਹੱਲਾਂ ਅਤੇ ਹੱਲਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਵਾਂਗੇ ਕਿ ਫਾਈਲ ਸਹੀ ਕਸਟਮ ਸਲੱਗ ਨਾਲ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੁੱਲ੍ਹੇ। ਅਸੀਂ ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਤੁਹਾਡੀ ਅਗਵਾਈ ਕਰਨ ਲਈ ਵਿਹਾਰਕ ਕੋਡ ਦੀਆਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਵੀ ਦੇਖਾਂਗੇ।
| ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
|---|---|
| Blob() | ਬਲੌਬ ਕੰਸਟਰਕਟਰ ਇੱਕ ਨਵਾਂ ਬਣਾਉਂਦਾ ਹੈ (ਬਲੋਬ) ਕੱਚੇ ਡੇਟਾ ਤੋਂ। ਵੈੱਬਪੇਜ ਡੇਟਾ ਤੋਂ PDF ਸਮੱਗਰੀ ਬਣਾਉਣ ਲਈ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਉਦਾਹਰਨ: ਨਵਾਂ ਬਲੌਬ([ਡਾਟਾ], { ਕਿਸਮ: 'ਐਪਲੀਕੇਸ਼ਨ/ਪੀਡੀਐਫ' }); |
| URL.createObjectURL() | ਬਲੌਬ ਆਬਜੈਕਟ ਲਈ ਇੱਕ URL ਤਿਆਰ ਕਰਦਾ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਬਲੌਬ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਯੋਗ ਸਰੋਤ ਵਜੋਂ ਮੰਨਣ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ URL PDF ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਜਾਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਉਦਾਹਰਨ: var blobURL = window.URL.createObjectURL(blob); |
| window.open() | ਇੱਕ ਕਸਟਮ ਸਲੱਗ ਨਾਲ ਤਿਆਰ ਬਲੌਬ ਸਮੱਗਰੀ (PDF) ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਜਾਂ ਵਿੰਡੋ ਖੋਲ੍ਹਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਨਵੀਂ ਟੈਬ ਕਾਰਵਾਈ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਉਦਾਹਰਨ: window.open(blobURL, '_blank'); |
| download | ਇੱਕ HTML5 ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਿੱਧੇ ਇੱਕ ਨਿਸ਼ਚਿਤ ਫਾਈਲ ਨਾਮ ਵਾਲੀ ਇੱਕ ਫਾਈਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਬਲੌਬ ਲਈ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਦਾ ਸੁਝਾਅ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਹ ਮਹੱਤਵਪੂਰਣ ਹੈ। ਉਦਾਹਰਨ: link.download = 'custom-slug.pdf'; |
| pipe() | ਨੂੰ Node.js ਵਿੱਚ ਵਰਤਿਆ ਗਿਆ ਹੈ ਕਲਾਇੰਟ ਨੂੰ ਫਾਈਲ ਸਮੱਗਰੀ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਕਿ PDF ਵਰਗੀਆਂ ਵੱਡੀਆਂ ਫਾਈਲਾਂ ਕੁਸ਼ਲਤਾ ਨਾਲ ਡਿਲੀਵਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਇਹ ਸਿੱਧੇ ਸਟ੍ਰੀਮ ਤੋਂ ਡੇਟਾ ਟ੍ਰਾਂਸਫਰ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ. ਉਦਾਹਰਨ: pdfStream.pipe(res); |
| setHeader() | ਜਵਾਬ ਆਬਜੈਕਟ ਵਿੱਚ ਕਸਟਮ ਸਿਰਲੇਖਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕੁੰਜੀ ਹੈ ਕਿ ਸਰਵਰ ਤੋਂ ਡਾਊਨਲੋਡ ਕੀਤੇ ਜਾਣ 'ਤੇ PDF ਨੂੰ ਸਹੀ MIME ਕਿਸਮ ਅਤੇ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਮਿਲੇ। ਉਦਾਹਰਨ: res.setHeader('Content-Disposition', 'attachment; filename="custom-slug.pdf"'); |
| createReadStream() | Node.js ਵਿੱਚ, ਇਹ ਵਿਧੀ ਸਰਵਰ ਦੇ ਫਾਈਲ ਸਿਸਟਮ ਤੋਂ ਫਾਈਲ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ PDF) ਨੂੰ ਸਟ੍ਰੀਮ ਕਰਦੀ ਹੈ। ਇਹ ਵੱਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਮੈਮੋਰੀ ਵਿੱਚ ਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਕੁਸ਼ਲਤਾ ਨਾਲ ਹੈਂਡਲ ਕਰਦਾ ਹੈ। ਉਦਾਹਰਨ: fs.createReadStream(pdfFilePath); |
| click() | ਟਰਿਗਰਜ਼ ਏ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਇੱਕ ਲੁਕੇ ਹੋਏ ਲਿੰਕ ਤੱਤ 'ਤੇ. ਇਹ ਇੱਥੇ ਯੂਜ਼ਰ ਇੰਟਰੈਕਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਫਾਈਲ ਡਾਊਨਲੋਡ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਉਦਾਹਰਨ: link.click(); |
JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਸਟਮ ਸਲੱਗ ਨਾਲ PDF ਤਿਆਰ ਕਰਨਾ
ਸਕ੍ਰਿਪਟਾਂ ਨੇ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਜਾਂ ਸਲੱਗ ਨਾਲ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਇੱਕ ਵੈਬਪੇਜ ਤੋਂ ਤਿਆਰ ਕੀਤੀ ਇੱਕ PDF ਫਾਈਲ ਨੂੰ ਖੋਲ੍ਹਣ ਦੀ ਚੁਣੌਤੀ ਨੂੰ ਹੱਲ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦਿੱਤਾ ਹੈ। JavaScript ਵਿੱਚ ਬਲੌਬਸ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਡਿਵੈਲਪਰਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨ ਵਾਲੇ ਮੁੱਖ ਮੁੱਦਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਫਾਈਲ ਨਾਮ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਵਿੱਚ ਅਸਮਰੱਥਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਕਸਟਮ ਸਲੱਗ ਸੈੱਟ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਸਾਡੇ ਹੱਲ ਵਿੱਚ, ਮੁੱਖ ਤਕਨੀਕ ਵਿੱਚ ਇੱਕ ਬਣਾਉਣਾ ਸ਼ਾਮਲ ਹੈ ਪੀਡੀਐਫ ਸਮੱਗਰੀ ਤੋਂ, ਜਿਸ ਨੂੰ ਅਸੀਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕਰਦੇ ਹਾਂ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਫੰਕਸ਼ਨ, ਅਸੀਂ ਇਸ ਬਲੌਬ ਨੂੰ ਇੱਕ ਸਰੋਤ ਵਿੱਚ ਬਦਲਦੇ ਹਾਂ ਜਿਸ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦਾ ਹੈ।
ਇੱਕ ਵਾਰ ਬਲੌਬ URL ਬਣ ਗਿਆ ਹੈ, ਅਸੀਂ ਵਰਤਦੇ ਹਾਂ PDF ਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਜੋ ਅਕਸਰ ਉਹਨਾਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਲੋੜੀਂਦਾ ਹੁੰਦਾ ਹੈ ਜਿੱਥੇ ਇੱਕ ਉਪਭੋਗਤਾ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਦੀ ਝਲਕ ਜਾਂ ਪ੍ਰਿੰਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਕਿਉਂਕਿ ਬਲੌਬ ਖੁਦ ਫਾਈਲ ਦੇ ਨਾਮਕਰਨ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਅਸੀਂ ਇੱਕ ਲੁਕਵੇਂ ਲਿੰਕ ਤੱਤ ਬਣਾ ਕੇ ਅਤੇ ਲੋੜੀਂਦਾ ਫਾਈਲ ਨਾਮ ਨਿਰਧਾਰਤ ਕਰਕੇ ਇਸ ਸੀਮਾ ਨੂੰ ਬਾਈਪਾਸ ਕਰਦੇ ਹਾਂ ਵਿਸ਼ੇਸ਼ਤਾ. ਇਹ ਲੁਕਿਆ ਹੋਇਆ ਲਿੰਕ ਫਿਰ ਸਹੀ ਫਾਈਲ ਨਾਮ ਨਾਲ ਡਾਉਨਲੋਡ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ "ਕਲਿਕ" ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਤਰੀਕਿਆਂ ਦਾ ਇਹ ਸੁਮੇਲ JavaScript ਵਿੱਚ ਬਲੌਬ ਨਾਮਕਰਨ ਸੀਮਾ ਲਈ ਇੱਕ ਆਮ ਹੱਲ ਹੈ।
ਸਰਵਰ-ਸਾਈਡ ਹੱਲਾਂ ਲਈ, ਅਸੀਂ ਸਿੱਧੇ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਨਾਲ PDF ਫਾਈਲਾਂ ਦੀ ਸੇਵਾ ਕਰਨ ਲਈ Node.js ਅਤੇ Express ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਵਰਤ ਕੇ , ਫਾਈਲ ਨੂੰ ਕਲਾਇੰਟ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਸਟ੍ਰੀਮ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਸਰਵਰ ਨੂੰ ਵੱਡੀਆਂ ਫਾਈਲਾਂ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਮੈਮੋਰੀ ਵਿੱਚ ਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਸੰਭਾਲਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਦ ਕਮਾਂਡ ਇੱਥੇ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ HTTP ਜਵਾਬ ਸਿਰਲੇਖ ਕਸਟਮ ਫਾਈਲ ਨਾਂ ਅਤੇ MIME ਕਿਸਮ (ਐਪਲੀਕੇਸ਼ਨ/ਪੀਡੀਐਫ) ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਧੀ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਆਦਰਸ਼ ਹੈ ਜਿੱਥੇ ਸਰਵਰ 'ਤੇ PDF ਤਿਆਰ ਜਾਂ ਸਟੋਰ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
ਇਹ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਮਾਡਿਊਲਰ ਅਤੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਵਾਤਾਵਰਨ ਵਿੱਚ ਕੰਮ ਕਰ ਰਹੇ ਹੋ ਜਾਂ ਨਾਲ ਇੱਕ ਬੈਕਐਂਡ ਹੱਲ , ਇਹ ਤਕਨੀਕਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀਆਂ ਹਨ ਕਿ ਤੁਹਾਡੀਆਂ PDF ਸਹੀ ਫਾਈਲ ਨਾਮ ਨਾਲ ਡਿਲੀਵਰ ਜਾਂ ਖੋਲ੍ਹੀਆਂ ਗਈਆਂ ਹਨ। ਦੋਵੇਂ ਪਹੁੰਚ ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਅਨੁਕੂਲਿਤ ਹਨ ਅਤੇ ਉਹਨਾਂ ਦ੍ਰਿਸ਼ਾਂ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹਨ ਜਿੱਥੇ PDF ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਜਾਂ ਸਰਵਰ-ਸਾਈਡ ਸਟੋਰ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਫਰੰਟ-ਐਂਡ ਅਤੇ ਬੈਕ-ਐਂਡ ਦੋਵੇਂ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਕੇ, ਇਹ ਲਚਕਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਲੋੜਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਸਭ ਤੋਂ ਢੁਕਵੇਂ ਢੰਗ ਨੂੰ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।
ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਬਲੌਬ-ਪੀਡੀਐਫ ਦੇ ਸਲੱਗ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ
JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਫਰੰਟ-ਐਂਡ ਹੱਲ
// Function to generate and open PDF in a new tab with custom filenamefunction 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 objectvar blobURL = window.URL.createObjectURL(blob);// Create a temporary link to trigger the downloadvar link = document.createElement('a');link.href = blobURL;link.download = filename; // Custom slug or filename// Open in a new tabwindow.open(blobURL, '_blank');}// Example usage: data could be the generated PDF contentvar pdfData = '...'; // Your PDF binary data hereopenPDFWithCustomName(pdfData, 'custom-slug.pdf');
Node.js ਨਾਲ ਬਲੌਬ PDF ਦੀ ਬੈਕਐਂਡ ਜਨਰੇਸ਼ਨ
Node.js ਅਤੇ Express ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੈਕਐਂਡ ਹੱਲ
// Require necessary modulesconst express = require('express');const fs = require('fs');const path = require('path');const app = express();// Serve generated PDF with custom slugapp.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 serverapp.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 attributefunction 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 downloadwindow.open(url, '_blank'); // Opens PDF in a new tab}// Example callvar pdfData = '...'; // PDF binary contentopenPDFInNewTab(pdfData, 'new-slug.pdf');
JavaScript ਵਿੱਚ ਬਲੌਬ ਫਾਈਲਨਾਮਾਂ ਲਈ ਸੀਮਾਵਾਂ ਅਤੇ ਹੱਲਾਂ ਨੂੰ ਸਮਝਣਾ
ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਮੁੱਖ ਚੁਣੌਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ JavaScript ਵਿੱਚ ਆਬਜੈਕਟ ਫਾਈਲਨਾਮ ਸੈੱਟ ਕਰਨ ਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਸੀਮਾ ਹੈ। ਜਦੋਂ ਇੱਕ PDF ਜਾਂ ਕਿਸੇ ਵੀ ਫਾਈਲ ਕਿਸਮ ਨੂੰ ਤਿਆਰ ਕਰਦੇ ਹੋ, ਤਾਂ ਬਲੌਬ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਇੱਕ ਸਿੱਧੀ ਵਿਧੀ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸਮੱਸਿਆ ਬਣ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਇਹਨਾਂ ਫਾਈਲਾਂ ਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ ਜਾਂ ਇੱਕ ਖਾਸ ਸਲੱਗ ਨਾਲ ਇੱਕ ਡਾਉਨਲੋਡ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਦੇ ਹੋ। ਬ੍ਰਾਉਜ਼ਰ ਦਾ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਇੱਕ ਮਨਮਾਨੀ ਨਾਮ ਤਿਆਰ ਕਰਨਾ ਹੈ, ਜੋ ਕਿ ਹਮੇਸ਼ਾਂ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਜਾਂ ਫਾਈਲ ਦੇ ਸੰਦਰਭ ਲਈ ਉਚਿਤ ਨਹੀਂ ਹੁੰਦਾ ਹੈ।
ਇਸ ਸੀਮਾ ਨੂੰ ਦੂਰ ਕਰਨ ਲਈ, ਡਿਵੈਲਪਰ HTML5 ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ ਵਿਸ਼ੇਸ਼ਤਾ, ਜੋ ਕਿ ਡਾਊਨਲੋਡ ਕੀਤੀ ਜਾ ਰਹੀ ਫਾਈਲ ਲਈ ਇੱਕ ਫਾਈਲ ਨਾਮ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। JavaScript ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਇੱਕ ਐਂਕਰ ਐਲੀਮੈਂਟ ਬਣਾ ਕੇ ਅਤੇ ਸੈੱਟ ਕਰੋ ਡਾਊਨਲੋਡ ਕਰੋ ਲੋੜੀਂਦੇ ਫਾਈਲਨਾਮ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ, ਜਦੋਂ ਬਲੌਬ ਸਮੱਗਰੀ ਡਾਊਨਲੋਡ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਅਸੀਂ ਫਾਈਲ ਨਾਮ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰ ਸਕਦੇ ਹਾਂ। ਹਾਲਾਂਕਿ, ਇਹ ਵਿਧੀ ਨਾਮ ਨੂੰ ਪ੍ਰਭਾਵਤ ਨਹੀਂ ਕਰਦੀ ਹੈ ਜਦੋਂ ਬਲੌਬ ਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਿਆ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਬਲੌਬ URL ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਬਿਲਟ-ਇਨ ਕਾਰਜਸ਼ੀਲਤਾ ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਇੱਕ ਹੋਰ ਪਹੁੰਚ ਹੈ ਬੈਕਐਂਡ ਤੋਂ ਇੱਕ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਫਾਈਲ ਦੀ ਸੇਵਾ ਕਰਨਾ ਜਾਂ ਐਕਸਪ੍ਰੈਸ, ਜਿੱਥੇ ਕਸਟਮ ਸਿਰਲੇਖਾਂ ਨੂੰ ਕਲਾਇੰਟ ਨੂੰ ਭੇਜੀ ਗਈ ਫਾਈਲ ਦੇ ਫਾਈਲ ਨਾਮ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਦ ਸਿਰਲੇਖ ਤੁਹਾਨੂੰ ਫਾਈਲ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਭਾਵੇਂ ਇਹ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਡਾਊਨਲੋਡ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ ਜਾਂ ਖੋਲ੍ਹੀ ਜਾ ਰਹੀ ਹੈ। ਇਹ ਵਿਧੀ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰ ਕੀਤੀ ਸਮੱਗਰੀ ਲਈ ਵਧੇਰੇ ਲਚਕਦਾਰ ਹੈ, ਪਰ ਕਲਾਇੰਟ-ਸਾਈਡ JavaScript ਬਲੌਬ ਲਈ, ਡਾਊਨਲੋਡ ਵਿਸ਼ੇਸ਼ਤਾ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੱਲ ਹੈ।
- ਕੀ ਮੈਂ JavaScript ਵਿੱਚ ਬਲੌਬ ਫਾਈਲ ਦੇ ਸਲੱਗ ਨੂੰ ਬਦਲ ਸਕਦਾ ਹਾਂ?
- ਨਹੀਂ, ਆਬਜੈਕਟ ਡਾਇਰੈਕਟ ਫਾਈਲ ਨਾਮ ਅਸਾਈਨਮੈਂਟ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਵਰਤਣ ਦੀ ਲੋੜ ਹੈ ਡਾਊਨਲੋਡ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ.
- ਮੈਂ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਨਾਲ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਬਲੌਬ ਨੂੰ ਕਿਵੇਂ ਖੋਲ੍ਹਾਂ?
- ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹੇ ਗਏ ਬਲੌਬ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਕਸਟਮ ਸਲੱਗ ਨਹੀਂ ਹੋ ਸਕਦੇ ਹਨ। ਡਾਉਨਲੋਡਸ ਲਈ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਵਿਸ਼ੇਸ਼ਤਾ.
- JavaScript ਵਿੱਚ ਬਲੌਬ ਫਾਈਲ ਡਾਉਨਲੋਡਸ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਕੀ ਹੈ?
- ਦੇ ਨਾਲ ਇੱਕ ਲੁਕਵੇਂ ਲਿੰਕ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ ਵਿਸ਼ੇਸ਼ਤਾ ਇੱਕ ਕਸਟਮ ਫਾਈਲ ਨਾਮ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ.
- ਕੀ ਮੈਂ ਸਰਵਰ ਤੇ ਫਾਈਲ ਨਾਮ ਸੈਟ ਕਰ ਸਕਦਾ ਹਾਂ?
- ਜੀ, ਵਰਤ ਕੇ ਨਾਲ Node.js ਵਰਗੇ ਬੈਕਐਂਡ ਵਿੱਚ।
- URL.createObjectURL() ਵਿਧੀ ਬਲੌਬ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?
- ਇਹ ਇੱਕ ਬਲੌਬ ਲਈ ਇੱਕ URL ਬਣਾਉਂਦਾ ਹੈ ਜਿਸਨੂੰ ਖੋਲ੍ਹਿਆ ਜਾਂ ਡਾਊਨਲੋਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਇਸ ਵਿੱਚ ਫਾਈਲਨਾਮ ਸੈਟਿੰਗਾਂ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ।
ਨਾਲ ਫਾਈਲ ਨਾਮਕਰਨ ਨੂੰ ਸੰਭਾਲਣਾ JavaScript ਵਿੱਚ ਵਸਤੂਆਂ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਖਾਸ ਤੌਰ 'ਤੇ ਜਦੋਂ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਫਾਈਲਾਂ ਨੂੰ ਖੋਲ੍ਹਣਾ ਹੋਵੇ। ਹਾਲਾਂਕਿ ਬਲੌਬ ਸਿੱਧੀਆਂ ਸਲੱਗ ਤਬਦੀਲੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦੇ ਹਨ, ਇੱਥੇ ਡਾਉਨਲੋਡ ਵਿਸ਼ੇਸ਼ਤਾ ਵਰਗੇ ਹੱਲ ਹਨ ਜੋ ਡਾਉਨਲੋਡਸ ਲਈ ਫਾਈਲਨਾਮਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ।
ਵਧੇਰੇ ਉੱਨਤ ਨਿਯੰਤਰਣ ਲਈ, ਸਰਵਰ-ਸਾਈਡ ਪਹੁੰਚ ਜਿਵੇਂ ਕਿ ਸੈੱਟ ਕਰਨਾ ਸਿਰਲੇਖ ਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਕਿ ਫਾਈਲਾਂ ਦੇ ਡਿਲੀਵਰ ਹੋਣ 'ਤੇ ਲੋੜੀਂਦਾ ਨਾਮ ਹੋਵੇ। ਤੁਹਾਡੀਆਂ ਪ੍ਰੋਜੈਕਟ ਲੋੜਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਿਆਂ, ਜਾਂ ਤਾਂ ਕਲਾਇੰਟ-ਸਾਈਡ ਜਾਂ ਸਰਵਰ-ਸਾਈਡ ਹੱਲ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਲਾਗੂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।
- ਇਹ ਸਰੋਤ ਦੱਸਦਾ ਹੈ ਕਿ JavaScript ਵਿੱਚ ਬਲੌਬ ਆਬਜੈਕਟਸ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ ਅਤੇ ਫਾਈਲ ਡਾਉਨਲੋਡਸ ਅਤੇ ਫਾਈਲਨਾਮਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਬਾਰੇ ਸਮਝ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। MDN ਵੈੱਬ ਡੌਕਸ - ਬਲੌਬ API
- ਇਹ ਲੇਖ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਡਾਉਨਲੋਡਸ ਦੌਰਾਨ ਫਾਈਲ ਨਾਮਾਂ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ HTML5 ਵਿੱਚ ਡਾਊਨਲੋਡ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਦਾ ਵੇਰਵਾ ਦਿੰਦਾ ਹੈ। W3Schools - HTML ਡਾਊਨਲੋਡ ਵਿਸ਼ੇਸ਼ਤਾ
- Node.js ਵਿੱਚ ਫਾਈਲ ਸਟ੍ਰੀਮਿੰਗ ਨੂੰ ਸੰਭਾਲਣ ਬਾਰੇ ਜਾਣਕਾਰੀ, ਖਾਸ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਅਤੇ ਪਸੰਦੀਦਾ ਸਿਰਲੇਖ ਸੈੱਟ ਕਰੋ . Node.js HTTP ਟ੍ਰਾਂਜੈਕਸ਼ਨ ਗਾਈਡ