前端雜記1

1.關於excelhtml

(1)下載excel前端

<a :href="地址" download="" style="margin-left:10px;margin-top:10px;">(下載導入模板)</a>

(2)後臺返回excel數據流前端下載excel文件vue

/*
*封裝函數 downLoadFile.js
*params:  
*data:二進制文件
*/
exports.install = function (Vue, options){
  Vue.prototype.downloadFile =function(data){
    if (!data) {
      return
    }
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'excel1111.xlsx')
    document.body.appendChild(link)
    link.click()
   };
}
設置請求頭:responseType: 'blob', // 代表返回服務器返回的數據類型, 沒有會亂碼

 

 

2.v-if 合v-show
瀏覽器

v-if 是「真正」的條件渲染,由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的:若是在初始渲染時條件爲假,則什麼也不作——直到條件第一次變爲真時,纔會開始渲染條件塊。

相比之下,v-show 就簡單得多——無論初始條件是什麼,元素老是會被渲染,而且只是簡單地基於 CSS 進行切換。

通常來講,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。所以,若是須要很是頻繁地切換,則使用 v-show 較好;若是在運行時條件不多改變,則使用 v-if 較好。

 

 

3.瀏覽器刷新緩存

(1)詳述-地址欄按回車刷新服務器

     沒有過時網絡

     HTTP返回狀態顯示200 OK,可是請求並無真正提交到HTTP服務器,而是瀏覽器發現緩存中還有未過時的文件,直接把請求攔截了,firebug裏面顯示所謂的「請求頭消息」、「響應頭消息」都是瀏覽器「僞造」的。這種刷新,使用的網絡流量  是 最小的,能夠說徹底沒有,時間消耗也是最少的app

     過時ide

     再問一下服務器,請求的URI在某個時間以後有沒有被修改過,而這個時間是由上次HTTP響應的Last-Modified決定的,服務器鑑定以後,若是沒有修改則返回304 Not Modified,瀏覽器收到後,從緩存裏讀出內容;若是有修改則返回200 OK,並返回新的內容函數

(2) 按F5刷新

     我無論瀏覽器緩存中的文件過時沒有,都去服務器詢問一下,至關於上次HTTP響應的Expires暫時失效。服務器的響應處理流程同上。

(3)按Ctrl+F5刷新

     我不要緩存中的文件了,強制刷新,直接到服務器上從新下載,因而服務器的響應處理與首次請求這個URI同樣,返回 200 OK和新的內容。這種刷新,使用的網絡流量是最大的,也是最耗時的

相關文章
相關標籤/搜索