image.png

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    6.     <title>Hello World!</title>
    7.   </head>
    8.   <body>
    9.     <h1>Hello World!</h1>
    10.     We are using Node.js <span id="node-version"></span>,
    11.     Chromium <span id="chrome-version"></span>,
    12.     and Electron <span id="electron-version"></span>.
    13.     <br />
    14.     <button id="download">Download</button>
    15.     <h4 id="process"></h4>
    17.     <!-- You can also require other files to run in this process -->
    18.     <script src="./renderer.js"></script>
    19.   </body>
    20. </html>
    1. // Modules to control application life and create native browser window
    2. const { app, BrowserWindow } = require('electron')
    3. const path = require('path')
    5. function createWindow () {
    6.   // Create the browser window.
    7.   const mainWindow = new BrowserWindow({
    8.     width: 800,
    9.     height: 600,
    10.     webPreferences: {
    11.       preload: path.join(__dirname, 'preload.js')
    12.     }
    13.   })
    15.   // and load the index.html of the app.
    16.   mainWindow.loadFile('index.html')
    18.   // Open the DevTools.
    19.   // mainWindow.webContents.openDevTools()
    20. }
    22. // This method will be called when Electron has finished
    23. // initialization and is ready to create browser windows.
    24. // Some APIs can only be used after this event occurs.
    25. app.whenReady().then(() => {
    26.   createWindow()
    28.   app.on('activate', function () {
    29.     // On macOS it's common to re-create a window in the app when the
    30.     // dock icon is clicked and there are no other windows open.
    31.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    32.   })
    33. })
    35. // Quit when all windows are closed, except on macOS. There, it's common
    36. // for applications and their menu bar to stay active until the user quits
    37. // explicitly with Cmd + Q.
    38. app.on('window-all-closed', function () {
    39.   if (process.platform !== 'darwin') app.quit()
    40. })
    42. // In this file you can include the rest of your app's specific main process
    43. // code. You can also put them in separate files and require them here.
    1. {
    2.   "name": "video-download",
    3.   "productName": "video-download",
    4.   "description": "My Electron application description",
    5.   "keywords": [],
    6.   "main": "./main.js",
    7.   "version": "1.0.0",
    8.   "author": "81492",
    9.   "scripts": {
    10.     "start": "electron ."
    11.   },
    12.   "dependencies": {},
    13.   "devDependencies": {
    14.     "electron": "20.0.3"
    15.   }
    16. }
    1. // All of the Node.js APIs are available in the preload process.
    2. // It has the same sandbox as a Chrome extension.
    3. window.addEventListener('DOMContentLoaded', () => {
    4.   const replaceText = (selector, text) => {
    5.     const element = document.getElementById(selector)
    6.     if (element) element.innerText = text
    7.   }
    9.   for (const type of ['chrome', 'node', 'electron']) {
    10.     replaceText(`${type}-version`, process.versions[type])
    11.   }
    12. })
    1. // This file is required by the index.html file and will
    2. // be executed in the renderer process for that window.
    3. // No Node.js APIs are available in this process because
    4. // `nodeIntegration` is turned off. Use `preload.js` to
    5. // selectively enable features needed in the rendering
    6. // process.
    7. const download = document.querySelector('#download')
    8. download.addEventListener('click', () => {
    9.   down('https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4')
    10. })
    11. const process =  document.querySelector('#process')
    14. function down(url) {
    15.   // 1. 创建一个 new XMLHttpRequest 对象
    16.   let xhr = new XMLHttpRequest();
    17.   xhr.responseType = 'blob'
    18.   // 2. 配置它：从 URL /article/.../load GET-request
    19.   xhr.open('GET', url);
    20.   xhr.setRequestHeader('token', 'haha');
    22.   // 3. 通过网络发送请求
    23.   xhr.send();
    25.   // 4. 当接收到响应后，将调用此函数
    26.   xhr.onload = function () {
    27.     if (xhr.status != 200) { // 分析响应的 HTTP 状态
    28.       alert(`Error ${xhr.status}: ${xhr.statusText}`); // 例如 404: Not Found
    29.     } else { // 显示结果
    30.       // alert(`Done, got ${xhr.response.length} bytes`); // response 是服务器响应
    31.       debugger
    32.       console.log(`Done, got ${xhr.response.size} bytes`, xhr.response)
    33.       const downloadA = document.createElement('a');
    34.       const blob = xhr.response
    35.       const URL = window.URL || window.webkitURL
    36.       const herf = URL.createObjectURL(blob)
    37.       downloadA.href = herf
    38.       downloadA.download = url;
    39.       downloadA.click();
    40.       window.URL.revokeObjectURL(herf)
    41.     }
    42.   };
    44.   xhr.onprogress = function (event) {
    45.     if (event.lengthComputable) {
    46.       // alert(`Received ${event.loaded} of ${event.total} bytes`);
    47.       console.log(`Received ${event.loaded} of ${event.total} bytes`)
    48.       process.innerHTML = ((event.loaded / event.total) * 100) + '%'
    49.     } else {
    50.       console.log(`Received ${event.loaded} bytes`, '没有 Content-Length')
    51.       // alert(`Received ${event.loaded} bytes`); // 没有 Content-Length
    52.     }
    54.   };
    56.   xhr.onerror = function () {
    57.     alert("Request failed");
    58.   };
    59. }

    使用
    打开链接
    https://gist.github.com/liulinboyi/1a8a08763d1b12b3169f831dc0aa8de1