思路:通過註冊表註冊自定義URL協議執行bat腳本,將文件路徑作為參數傳入 環境:win10 前置問題與條件 問題1:可以從瀏覽器直接打開可執行文件嗎? 答:不能。其實可以通過 ActiveXObject 實現軟體直接打開,但是它是不安全的,並且現在被大多數現代瀏覽器禁止,只能在 ie 使用。而通過 ...
思路:通過註冊表註冊自定義URL協議執行bat腳本,將文件路徑作為參數傳入
環境:win10
前置問題與條件
問題1:可以從瀏覽器直接打開可執行文件嗎?
答:不能。其實可以通過 ActiveXObject
實現軟體直接打開,但是它是不安全的,並且現在被大多數現代瀏覽器禁止,只能在 ie 使用。而通過註冊表自定義URL協議,通過將文件名、操作等作為參數加入URL並由瀏覽器訪問,可以觸發協議執行bat腳本執行相應操作。
問題2:如何獲取文件的路徑?可以從瀏覽器上通過 <input type="file">
直接獲取嗎?
答:問題1我們知道無法在瀏覽器直接可執行exe文件。從外部打開的話,就需要有文件的路徑。但是同樣的,現代瀏覽器禁止從 <input type="file">
中得到文件的路徑信息,將 file.path
定義為 undefined
或者 C:\fakepath\<文件名>
,雖然ie瀏覽器可以,但是需要修改安全設置,也不是很靠譜。無法從瀏覽器直接獲取,就只能指定一個文件夾存放exe的快捷方式了,這個方法需要第一次執行前將需要的可執行文件的快捷方式集中到一個指定文件夾中,雖然有點麻煩,但是總歸是獲取文件路徑的一個辦法。
註冊自定義URL協議
新建 reg 文件:
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\EMTool3]
@="URL:EMTool3 Protocol"
"URL Protocol"=""
[HKEY_CLASSES_ROOT\EMTool3\DefaultIcon]
@="EMTool3.exe,1"
[HKEY_CLASSES_ROOT\EMTool3\shell]
[HKEY_CLASSES_ROOT\EMTool3\shell\open]
[HKEY_CLASSES_ROOT\EMTool3\shell\open\command]
@="cmd /c set arg1=%1 & \"C:\\Data1\\ExpManageTool\\handle_file.bat\" %%arg1%%"
EMTool3
為協議名稱,C:\\Data1\\ExpManageTool\\handle_file.bat
為執行的bat腳本的位置。
雙擊reg文件,即可執行註冊該URL協議。
編寫bat腳本
@echo off
Setlocal enableDelayedExpansion
echo url: [%arg1%]
set m=%arg1%
rem 將url編碼改為正常格式
set m=%m:EMTool3://=%
set m=%m:separator=&%
set m=!m:%%5C=/!
rem 取第一個字元
set mode=%m:~0,1%
rem 去除第一個字元得到路徑
set m=%m:~1%
echo mode: [%mode%]
echo path: [%m%]
if "%mode%"=="1" (
echo open exe [%m%]
goto openExe
echo done
)
pause
:openExe
rem 實際運行程式的地址在這裡配置 %m% 是參數
echo exec: %m%
start "" %m%
rem Setlocal enableDelayedExpansion
rem pause
goto :eof
這裡將協議後的第一個字元作為參數,字元 1
表示打開該可執行文件,有需要可以自己在腳本上添加其他功能。
bat編寫完成後,放在reg中的指定文件夾下即可。
測試使用
測試URL協議
在瀏覽器地址輸入 <協議名>://1<快捷方式絕對地址>
,1為我定義的打開可執行文件動作的參數,然後回車。
點擊打開。
成功打開應用。
在前端中使用
在前端中,我們可以在 <input type="file>">
打開一個文件後獲取文件名,然後加上指定文件夾首碼,組成路徑,然後使用 windows.open()
函數在新標簽頁打開該URL。我這裡使用的是vue2+element-UI。
<input
:id="scope.row.cName"
type="file"
hidden
@change="fileChange(scope.row.cName)"
>
<el-button
icon="el-icon-folder-opened"
@click="selectExeFile(scope.row.cName)"
/>
</input>
fileChange(id) {
const file = document.getElementById(id).files[0]
let fileName = file.name
if (fileName.endsWith('.exe')) {
fileName = fileName.substring(0, fileName.indexOf('.exe'))
}
this.exeUrl = 'EMTool3://1C:\\Data1\\ExpManageTool\\exeList\\' + fileName + '.lnk' // URL構造
console.log(this.exeUrl)
window.open(this.exeUrl, '_blank') // 新標簽頁打開URL
}