美文网首页
JS 保存文件(屏蔽默认打开)

JS 保存文件(屏蔽默认打开)

作者: 静候那一米阳光 | 来源:发表于2017-08-08 00:06 被阅读0次

问题描述:

打开一个链接不是提示下载文件而是直接用浏览器打开。

实现效果:

弹出下载框,然后选择本地存储路径进行保存。

实现浏览器下载而非打开文件

var e = document.createElement('a');
e.href = 'http://zhangdanyang.com/filename.md';
e.download = 'filename.md';
e.click();

与NodeJS相结合

实现流程:

  • 后端生成文件并将文件路径返回给前端。 * 前端动态创建a元素, 使其href属性指向文件路径, 并添加download属性。 * 模拟其点击事件以实现下载。

实例展示

前端

var params = {
  'title': this.post.title,
  'category': this.post.category,
  'content': this.post.content,
  'tags': this.post.tags
}
this.$axios.post('/save', params).then(function(response) {
  console.log(response);
  console.log(window.location.origin, response.data)
  var e = document.createElement('a');
  e.href = window.location.origin.replace('8080', '3333') + '/' + response.data;
  e.download = (params.title || 'NoTitle') + '.md';
  e.click();
}).catch(function(error) {
  // console.log(error);
  // that.error = error.toString()
  that.error = true;
  that.loading = false;
})

后端

【 app.js】

var save = require('./save');
app.use(express.static(path.join(__dirname, 'files')));
//保存到本地
app.post('/save', function(req, res) {
  var post = {
    'title': req.body.title,
    'content': req.body.content,
    'category': req.body.category,
    'tags': req.body.tags
  };
  save.save(post, function(fileName) {
    // 解决方案
    res.send(fileName)
      // 方案1:测试无效,起码 .md 无效
      // var stats = fs.statSync(filePath);
      // if (stats.isFile()) {
      //   res.set({
      //     'Content-Type': 'application/octet-stream',
      //     'Content-Disposition': 'attachment; filename=' + fileName,
      //     'Content-Length': stats.size
      //   });
      //   fs.createReadStream(filePath).pipe(res);
      // } else {
      //   res.end(404);
      // }
      // 方案2:测试无效,起码 .md 无效
      // res.download(filePath, fileName, function(err) {
      //   if (err) {
      //     // Handle error, but keep in mind the response may be partially-sent
      //     // so check res.headersSent
      //   } else {
      //     // decrement a download credit, etc.
      //   }
      // });
  }, function() {
    res.end(404);
  });
});

【 save.js】

var fs = require('fs');
var save = {
    save: function(param, callback, callerr) {
      var title = param.title || '';
      var category = param.category || '';
      var tags = param.tags || '';
      var content = param.content || '';
      var filename = (title || 'NOTITLE') + '(' + Date.now() + ')' + '.md';
      var con = "---\r\ntitle: " + title + "\r\ncategory: " + category + "\r\ntags: " + tags + "\r\n---\r\n" + content;
      fs.writeFile('files/' + filename, con, (err) => {
        if (err) {
          callerr && callerr();
          throw err;
          return;
        }
        console.log('The file has been saved!');
        callback && callback(filename);
      });
    }
  }
  // var param={
  //  title:'',
  //  category:'',
  //  tags:'',
  //  content:''
  // }
  // save.save(param);
module.exports = save;

相关文章

  • JS 保存文件(屏蔽默认打开)

    问题描述: 打开一个链接不是提示下载文件而是直接用浏览器打开。 实现效果: 弹出下载框,然后选择本地存储路径进行保...

  • linux命令集

    1.使用默认程序打开文件 2.保存文件并退出 先按esc键退出编辑页面,然后输出:wq

  • js保存文件

    js保存文件

  • 创建数据库实例

    创建并且保存实例 打开test里的create_test.js文件: 1. 进入 user.js 获取创建好的us...

  • node 打开中文乱码

    Node.js对中文支持不太好,有时侯打开文件会出现乱码。要想正常显示中文,需要注意以下两点: 保证.js文件保存...

  • myeclipse中文乱码,JSP页面乱码

    一、设置新建常见文件的默认编码格式,也就是文件保存的格式。在不对MyEclipse进行设置的时候,默认保存文件的编...

  • js保存文件

    以前保存文件有用openwindow,之后调用execCommand('SaveAs',true,'filenam...

  • vi常用命令

    一、打开文件、保存、关闭文件 vim [filename] //打开或新建 :w //保存 :w...

  • sublime text 打开txt文档乱码问题

    对于windows系统使用系统自带的txt编辑工具,默认打开和保存文件的文件的格式是GBK或者GB2312,而su...

  • editplus默认文件打开

    首先找到Windows10的开始菜单,在屏幕的左下角;点击开始菜单,然后找到设置并单击。win10设置txt文件的...

网友评论

      本文标题:JS 保存文件(屏蔽默认打开)

      本文链接:https://www.haomeiwen.com/subject/euuzlxtx.html