如何使用 Node.js 服务器控制浏览器下载文件还是预览文件 All In One

如何使用 Node.js 服务器控制浏览器下载文件还是预览文件 All In One

difficulty: Medium / 难度: 中等

Content-Type & Content-Disposition

告诉浏览器这是一个二进制文件，浏览器不需要执行该文件，直接作为附件弹出下载对话框即可 ✅
告诉浏览器这是一个附件, 要下载是png图片

app.get("/cdn", function(req,res) {
    // node.js render remote url file
    // cdn url ???
    const url = `https://cdn.xgqfrms.xyz/logo/icon.png`;
    var filename = 'logo.png';
    var filepath = path.join(__dirname, `./${filename}`);
    // log('__dirname', __dirname);
    fs.readFile(filepath, function(err, data){
      res.set({
        'Content-Type': 'application/octet-stream',
        // 告诉浏览器这是一个二进制文件，浏览器不需要执行该文件，直接作为附件弹出下载对话框即可 ✅
        'Content-Disposition': `attachment; filename=${filename}`,
        // 告诉浏览器这是一个附件要下载是png图片
      });
      console.log('data =', data);
      res.end(data);
    });
});

demos

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2022-04-17
 * @modified
 *
 * @description
 * @augments
 * @example
 * @link
 * @solutions
 *
 *
 */

var fs = require('fs');
var path = require("path");

var express = require("express");
var app = express();


const log = console.log;

app.get("/", function(req,res) {
    var filename = 'logo.png';
    var filepath = path.join(__dirname, `./${filename}`);
    // console.log('__dirname', __dirname);
    // console.log('dir', dir);
    // ReferenceError: dir is not defined
    const dir = '/Users/xgqfrms-mbp/Documents/GitHub/learn-typescript-by-practice/000-xyz/download-preview/'
    console.log('filepath', filepath.replace(dir, ''));
    fs.readFile(filepath, function(err, data){
      res.set({
        'Content-Type': 'application/octet-stream',
        // 告诉浏览器这是一个二进制文件，浏览器不需要执行该文件，直接作为附件弹出下载对话框即可 ✅
        'Content-Disposition': `attachment; filename=${filename}`,
        // 告诉浏览器这是一个附件要下载是png图片
      });
      console.log('data =', data);
      res.end(data);
    });
});

app.get("/cdn", function(req,res) {
    // node.js render remote url file
    // cdn url ???
    const url = `https://cdn.xgqfrms.xyz/logo/icon.png`;
    var filename = 'logo.png';
    var filepath = path.join(__dirname, `./${filename}`);
    // log('__dirname', __dirname);
    fs.readFile(filepath, function(err, data){
      res.set({
        'Content-Type': 'application/octet-stream',
        // 告诉浏览器这是一个二进制文件，浏览器不需要执行该文件，直接作为附件弹出下载对话框即可 ✅
        'Content-Disposition': `attachment; filename=${filename}`,
        // 告诉浏览器这是一个附件要下载是png图片
      });
      console.log('data =', data);
      res.end(data);
    });
});

const port = 3000;
app.listen(port, function(){
  console.log(`server is running: http://localhost:${port}`);
});



module.export = app;
// export {
//   app,
// };

https://cdn.xgqfrms.xyz/HTML5/Blob/index.html

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

Content-Disposition

在常规的 HTTP 应答中，Content-Disposition 响应头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition

HTML5 download 执行条件

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

download normal file

https://stackoverflow.com/questions/3102226/how-to-set-name-of-file-downloaded-from-browser/48064008#48064008

download blob file

https://stackoverflow.com/questions/71686536/how-to-set-the-download-file-extension-for-blob-data/71895888#71895888

referer & referrer policy

https://www.cnblogs.com/xgqfrms/p/17533694.html

js string replace

const str = 'abc xyz';

const new_str = str.replace('abc ', '');

new_str;
// 'xyz'

str;
// 'abc xyz'

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

字节跳动前端技术博客水文点评

https://www.cnblogs.com/xgqfrms/p/17742037.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---