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

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

"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,
// };

replace

const str = 'abc xyz';

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

new_str;
// 'xyz'

str;
// 'abc xyz'

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

demo

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

refs

---

---

©xgqfrms 2012-2020

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

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

---