1.showOpenDialog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Demo</title>
</head>

<body>
    <h1>Hello demo</h1>
    <button id="btn">打開子窗口</button>
    <a id="go_a" href="https://www.cnblogs.com/fwjlucifinil/p/13535393.html">luc</a>
    <div id="son_call"></div>
    <button id="upload">12312</button>
    <img id="img_xjj" style="width: 100%;">
</body>
<script src="render/index.js"></script>
<script>
    const { dialog } = require('electron').remote
    // 打開文件選擇對話框可以使用dialog.showOpenDialog()方法來打開，它有兩個參數，一個是設置基本屬性，另一個是回調函數，如果是異步可以使用then來實現。
    // showOpenDialog異步  showOpenDialogSync  同步
    // title ： String (可選)，對話框的標題
    // defaultPath ： String (可選),默認打開的路徑,默認文件名
    // buttonLabel ： String (可選), 確認按鈕的自定義標簽，當為空時，將使用默認標簽
    // filters ： 文件選擇過濾器，定義后可以對文件擴展名進行篩選
    // properties：打開文件的屬性，比如打開文件還是打開文件夾，甚至是隱藏文件。
    var upload = this.document.getElementById('upload')
    upload.onclick = function () {
        dialog.showOpenDialog({
            title: '天下的一切都是本王所有',
            defaultPath: 'd:\1',
            filters: [{
                name: 'jpg',
                extensions: ['jpg', 'png']
            }],
            buttonLabel: '開啟新世界大門!'
        }).then(result => {
            let image = document.getElementById('img_xjj')
            console.log(result)
            image.setAttribute("src", result.filePaths[0])
        }).catch(err=>{
            console.log(err)
        })
    }
</script>

</html>

2.showSaveDialog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>彈出子窗口</h2>
    <button id="son_btn">向父窗口傳遞信息</button>
    <button id="upload_file">上傳文件</button>
    <button id="save_file">保存文件</button>
</body>
<script>
    var pop_btn = this.document.getElementById("son_btn")
    pop_btn.onclick = function(e){
        //window.opener表示當前窗口的父窗口
        //
        alert("發送")
        window.opener.postMessage('I`m Lucifinil_popup')
    }

    const { dialog } = require('electron').remote
    var upload_file = this.document.getElementById('upload_file')
    upload_file.onclick = function () {
        dialog.showOpenDialog({
            title:'天下的一切都是本王所有',
            defaultPath:"xiao.jpg"
        })
    }

    const fs = require('fs')
    var save_file = this.document.getElementById('save_file')
    save_file.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件'
        }).then(result=>{
            window.opener.postMessage(result)
            console.log(result)
            fs.writeFileSync(result.filePath,'啊哈哈哈')
        }).catch(err=>{
            console.log()
        })
    }

</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 electron-利用node開發桌面應用 SpringBoot上傳ZIP文件並保存文件信息 electron+vue中使用nodeJs的fs模塊以及上傳文件現在,以編程方式在 Electron 中上傳文件,是非常簡單的! c#上傳文件（二）使用文件流保存文件 java http下載文件/上傳文件保存 Electron中常用對話框-打開文件對話框、保存文件對話框、提示對話框 JS生成PDF文件上傳服務器或者下載保存 ASP.NET Core單文件和多文件上傳並保存到服務端 thinkphp表單上傳文件並將文件路徑保存到數據庫中