Vue3与pywebview实现获取本地文件夹的绝对路径
作者：lewis_0
这篇文章主要为大家详细介绍了Vue3如何结合pywebview实现获取本地文件夹的绝对路径,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
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):
"""
该函数无用，当时为了测试使用，该函数的参数为window，前端传入的参数不是window，所以该函数无效
"""
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)
注：这种解决方案只是临时的一种方案，更好的解决方案暂时未找到，且这种解决方案刚好满足本人项目需求，如有更好的解决方案，请共同交流，不胜感激。
知识补充
除了上文的内容，小编还为大家整理了Vue3结合pywebview实现前后端初步通信的示例代码，希望对大家有所帮助
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() {
// 调用后端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>
到此这篇关于Vue3与pywebview实现获取本地文件夹的绝对路径的文章就介绍到这了,更多相关Vue3获取本地文件夹的绝对路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！