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

需求分析

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

node服务端

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

javascript 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插件并引入该插件。

```javascript npm install downloadjs； // 安装

import download from "downloadjs"; // 引入 ```

使用

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

javascript 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))

跨域

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

javascript 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中去配置跨域的问题；其实在后台也是可以进行配置的，但是我尝试多次无果后就放弃了。

```javascript 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文件的内容；都没有问题的。说明该方法是走的通的，喜欢的同学们也可以自己尝试一哈哦！如果你有更好的方法的话，也可以给我说说

往期文章

• css登录按钮炫酷效果

• css是你永远学不会的语言

• electron 中使用本地数据库

• electron 中 webview的使用

• 前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新

• electron+vue3+ts开发了一个JSON工具桌面软件

• element-ui动态级联选择器回显问题，二十多行代码就可以搞定

• 小程序云开发，通过云函数进行云开发

• 原生js实现瀑布流效果

• uniapp中的请求接口封装