Vue3與pywebview實現(xiàn)獲取本地文件夾的絕對路徑

更新時間：2024年11月05日 09:41:35 作者：lewis_0

這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合pywebview實現(xiàn)獲取本地文件夾的絕對路徑,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

1、Vue端

<template>
  <div>
    <button @click="selectFolder">選擇文件夾</button>
    <button @click="showFolder">顯示文件夾</button>
    <p>{{ folderPath }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      folderPath: ''
    };
  },
  methods: {
    selectFolder() {
      window.pywebview.api.open_folder_dialog().then(path => {
        this.folderPath = path;
        console.log(this.folderPath);
      });
    },
    showFolder() {
      window.pywebview.api.show_folder_dialog().then(path => {
        this.folderPath = path['path_back'];
        console.log(this.folderPath);
      });
    }
  }
};
</script>

2、python端

import webview

class Api:
    def open_folder_dialog(self, window):
    	"""
    	該函數(shù)無用，當(dāng)時為了測試使用，該函數(shù)的參數(shù)為window，前端傳入的參數(shù)不是window，所以該函數(shù)無效
    	"""
        folder_path = window.create_file_dialog(webview.FOLDER_DIALOG)
        print(folder_path)
        folder_path_str = str(folder_path)
        print(folder_path_str, type(folder_path_str))

    def show_folder_dialog(self):
        folder_path = root_path

        response = {"path_back": folder_path}

        return response

def open_folder_dialog(window):
    global root_path
    folder_path = window.create_file_dialog(webview.FOLDER_DIALOG)
    print(folder_path, type(folder_path))
    root_path = str(folder_path[0])
    print(root_path, type(root_path))


if __name__ == '__main__':
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/index.html', js_api=api)
    # webview.start(api.show_folder_dialog, window, debug=True)
    webview.start(open_folder_dialog, window, debug=True)

注：這種解決方案只是臨時的一種方案，更好的解決方案暫時未找到，且這種解決方案剛好滿足本人項目需求，如有更好的解決方案，請共同交流，不勝感激。

知識補充

除了上文的內(nèi)容，小編還為大家整理了Vue3結(jié)合pywebview實現(xiàn)前后端初步通信的示例代碼，希望對大家有所幫助

pywebview后端

class Api:
    def greet(self, test_text):
        print(test_text)
        return f"hello, {test_text}"


if __name__ == '__main__':
    # 前后端通信測試
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/index.html', js_api=api)   # vue的build文件的路徑
    webview.start(debug=True)

Vue3前端

<template>
  <div id="app">
    <h1>Greeting Test</h1>
    <button @click="greet">Greet</button>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: ''
    };
  },
  methods: {
    greet() {
      // 調(diào)用后端API
      if (window.pywebview) {
        window.pywebview.api.greet('Socket test').then(response => {
          this.greeting = response;
          console.log(this.greeting);
        });
      }
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

到此這篇關(guān)于Vue3與pywebview實現(xiàn)獲取本地文件夾的絕對路徑的文章就介紹到這了,更多相關(guān)Vue3獲取本地文件夾的絕對路徑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: