Electron（二）文件拖动（读取文件）、网络请求

npm run dev

页面

<template>
  <div id="wrapper">
    <el-input v-model="input" :disabled="status" :autofocus="true" placeholder="请输入你快递单号，然后按回车"
              @keyup.enter.native="submit"></el-input>
    <template v-if="input">
      <el-table
        :data="result"
        border
        height="385"
        style=" 100%;margin-top: 20px">
        <el-table-column
          prop="time"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="context"
          label="详情"
        >
        </el-table-column>
      </el-table>
    </template>
    <div class="file" v-if="!input" id="file">
      {{filePath}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'landing-page',
    data() {
      return {
        input: null,
        result: null,
        status: false,
        filePath: '拖动文件到这里'
      }
    },
    methods: {
      desc (x,y) {
        return (x['time'] < y['time']) ? 1 : -1
      },
      getInfo() {
        axios.get(`https://biz.trace.ickd.cn/auto/${this.input}?mailNo=${this.input}`).then(res => {
          this.result = res.data.data.sort(this.desc)
          this.status = false
        })
      },
      submit() {
        this.status = true
        this.getInfo()
      },
      // 文件拖动
      dropFile() {
        const fs = require('fs')
        document.addEventListener('drop', (e) => {
          e.preventDefault();
          e.stopPropagation();

          for (const f of e.dataTransfer.files) {
            this.filePath = f.path
          }
          // 设置编码格式
          fs.readFile(this.filePath, 'utf-8', function(err, data) {
            // 读取文件失败/错误
            if (err) {
              throw err;
            }
            // 读取文件成功
            console.log('utf-8: ', data.toString());
            //直接用console.log(data);也可以
          });
        });
        document.addEventListener('dragover', (e) => {
          e.preventDefault();
          e.stopPropagation();
        });
      },
    },
    mounted() {
      this.dropFile()
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
  /*滚动条样式*/
  ::-webkit-scrollbar {
     8px;
    height: 8px;
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(0, 0, 0, .2);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Source Sans Pro', sans-serif;
  }

  #wrapper {
    background: radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 1) 40%,
      rgba(229, 229, 229, .9) 100%
    );
    height: 100vh;
    padding: 30px 30px;
     100vw;
    -webkit-app-region: drag;
  }

  .file {
     100%;
    margin-top: 20px;
  }
</style>

main.js

function createWindow() {
  mainWindow = new BrowserWindow({
     1000,
    height: 480,
    // width 和 height 将设置为 web 页面的尺寸
    useContentSize: true,
    // 窗口在屏幕居中
    center:true,
    // 窗口是否可以改变尺寸 开启后maximizable失效
    resizable: false,
    // 窗口是否可以移动
    // movable: true,
    // 窗口是否可以最小化
    minimizable: true,
    // 窗口是否可以最大化
    maximizable: true,
    // 置顶窗口
    alwaysOnTop:false,
    webPreferences: {
      // 是否开启 DevTools,开发模式默认位true
      // devTools:true,
      //  是否集成Node
      // nodeIntegration: false,
      // 禁用同源策略
      webSecurity: false,
      // 是否允许一个使用 https的界面来展示由 http URLs 传过来的资源。默认false
      allowDisplayingInsecureContent: false,
      // 是否允许一个使用 https的界面来渲染由 http URLs 提交的html，css，javascript。默认为 false。
      allowRunningInsecureContent: false,
      nativeWindowOpen: true
    },
    show: false,
    backgroundColor: '#fff'
  });

  // 当页面已经渲染完成(但是还没有显示) 并且窗口可以被显示时触发，需要先配置show: false
  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  });

  mainWindow.loadURL(winURL);
  mainWindow.setMenu(null);
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}
// 完成初始化
app.on('ready', createWindow);
// 当所有的窗口都被关闭时触发
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
});

原生http请求

      getNetInfo() {
        const {net} = require('electron').remote;
        const request = net.request('https://github.com');
        request.on('response', (response) => {
          //console.log(`STATUS: ${response.statusCode}`);
          //console.log(`HEADERS: ${JSON.stringify(response.headers)}`);
          response.on('data', (chunk) => {
            console.log(`BODY: ${chunk}`)
          });
          response.on('end', () => {
            console.log('No more data in response.')
          })
        });
        request.end()
      }

Electron（二）文件拖动（读取文件）、网络请求

相关推荐