likes
comments
collection
share

electron将本地文件转为文件流并通过http传递给前端下载

作者站长头像
站长
· 阅读数 71

在往期的文章中我们了解到，electron可以作为一个本地服务器，只要是在同ip地址的情况下都是可以进行访问的，那么我想访问服务器（安装electron软件的这台电脑）下的文件是否可以呢？

需求分析

在同一ip下其他电脑想访问本地服务器电脑里面的pdf文件，并且可以在本机上浏览，还可以导出在本地

node服务端

监听get请求，将本地文件转为文件流，然后再通过http返回给前端进行下载或者预览

if (request.method === 'GET' && request.url === '/') {
   const filePath = path.join('C:\\Users\\zh\\Desktop', 'ip.pdf');
   const stat = fs.statSync(filePath);
   res.writeHead(200, {
      'Content-Type': 'application/pdf',
      'Content-Length': stat.size
   });
   const readStream = fs.createReadStream(filePath);
   readStream.pipe(res);
};

前端预览

我们可以在浏览器中直接访问这个ip接口，即可在浏览器中展示pdf文件信息了。

前端下载

安装依赖

安装downloadjs插件并引入该插件。

npm install downloadjs； // 安装

import download from "downloadjs"; // 引入

使用

通过downloadjs发送请求下载的方式下载pdf到你想要的位置即可。

axios
  .get('http://127.0.0.1:8888/pdf',{
    headers: {
      'Content-Type': "multipart/form-data"
    },
    responseType: 'blob'
  })
  .then((res) => {
    download(new Blob([res]), 'test.pdf', 'application/pdf');
  })
  .catch((err) => console.log(err))

跨域

我们在完成以上步骤以后去下载文件时，会触发跨域问题；如下提示

cess to XMLHttpRequest at 'http://192.0.0.0.0:8888/' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果你是vue的话需要在vue.config.js中去配置跨域的问题；其实在后台也是可以进行配置的，但是我尝试多次无果后就放弃了。

module.exports = {
  // 基本路径,相对路径
  publicPath: '/',
  // 输出文件目录
  // outputDir: process.env.outputDir
  devServer: {
    hot:true,
    host:'0.0.0.0',
    port:8080,

    proxy:{
      '/api':{
        target:'http://127.0.0.0.0:8888',
        changeOrigin:true,
        logLevel:'debug',
        pathRewrite:{
          '^/api':''
        }
      }
    }
  }
}

我们配置好跨域以后再次尝试下载就没得问题了，然后对比了pdf文件的内容；都没有问题的。说明该方法是走的通的，喜欢的同学们也可以自己尝试一哈哦！如果你有更好的方法的话，也可以给我说说

往期文章

转载自:https://juejin.cn/post/7223658394350272567
评论
请登录