前端JS：HTML DOM open方法在項目中的應用

定義和用法

• open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口。

  window.open(URL,name,features,replace)
  複製代碼

• 打開一個新窗口

  window.open("relative url","_blank");
  複製代碼

參考:https://www.w3school.com.cn/jsref/met_win_open.asp

模板文件下載前端解決方案:

需求：

• 當用戶點擊「模板下載」按鈕，此時web客戶端執行文件下載（如:「.xlsx」格式文件），（此過程不通過請求後端以文件服務器url地址請求的方式下載或者後端返回文件流的方式，前臺對文件流進行處理的方式下載；）如圖所示：

分析:

• 經過將須要下載的靜態資源文件存放在web端，當點擊下載模板按鈕的時候，執行window.open("relative URL");// ps: 標籤兼容性很差；
• "relative URL" 爲打包之後相對於根頁面index.html文件的相對目錄；
• 在vue項目中cli 3.x腳手架建立的項目，將不須要被打包編譯的資源文件存放在public目錄之下
• 在vue項目中cli 2.x腳手架建立的項目，將不須要被打包編譯的資源文件存放在static目錄之下

如圖所示：爲cli 3.x 項目下模板文件存放路徑；以及打包編譯後dist目錄

此時點擊下載，將執行web端資源文件下載，這種狀況適用於格式固定的模板文件下載前端解決方案；

代碼：

<em @click="fetchTemplate">下載模板</em>
複製代碼

uploadFile.vue

<el-upload
                class="upload-excel"
                drag
                show-file-list
                :limit="uploadLimit"
                :on-exceed="handleExceed"
                :before-upload="beforeUploadExcel"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                :action="actionUrl"
                multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">將文件拖到此處，或<em>瀏覽文件上傳</em></div>
          <div class="el-upload__tip" slot="tip">只能上傳一個xlsx/xls格式文件，且不超過10MB <em @click="fetchTemplate">下載模板</em> </div>
        </el-upload>
        <span slot="footer" class="dialog-footer  uploadFooter">
                <el-button type="primary"  :disabled="canReview" class="btn confirmBtn" @click="uploadDialogVisible = false;reviewExcelData()">預覽</el-button>
                <el-button class=" btn cancelBtn" @click="uploadDialogVisible = false">取 消</el-button>
             </span>
      </el-dialog>
複製代碼

javascript：

<script>
exprot default{
    method:{
        fetchTemplate(){
      window.open("./file/uploadFile.xls");
    }
    }
}
</scritp>
複製代碼

參考