Excel & @media print

2019-09-14 00:39:29

公司的後台系統是使用 vue-element-admin 搭建而成的,這四、五個月下來 element-ui 總算有一些些心得。

為了盡可能的更加熟悉、寫出好維護的 code、減少 bug 的產生,在自己或公司電腦 build 一個 Demo 參考也是一個不錯的方式。

中秋節回家過節,跟一個朋友聊到他學校實驗室有些需求。以往的客戶資料都需要在資料夾中尋找,然後找到客戶資料之後,手動 key in 資料到有列印樣式的檔案,blahblah...然後他希望可以將資料轉為 Excel 檔案時,不僅只是轉換資料為 Excel 又可以套用樣式,以便列印。

既然可以將 Excel 轉為 HTML 的格式顯示在後台頁面上,說明了這需求其實很快就可以解決了,然後實作給他看的過程,需求解決了,也發現事情不是只有 window.print() 這麼簡單!所以沒事就研究一下吧!


兩種寫 @media print 的方式

<link href="screen.css" media="screen">
<link href="print.css" media="print">

因為是練習、需求單純,所以將列印模式下的設定 @media print{},直接寫在 vue 裡面的 <style>

<style>
body {}
...
@media print {
  body {
    background: #fff;
  }
}
</style>

隱藏列印模式下不相干的元素

原本直覺的想到在 created 監聽 [beforeprint](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event) 事件,然後來做些什麼事情

created() {
  window.addEventListener('beforeprint', (e) => {
    // ...do something
  })
},

然後發現不太對勁,加個 class 就好了不是嗎XD

<upload-excel-component class="noPrint" :on-success="handleSuccess" :before-upload="beforeUpload" />

<style>
.noPrint {
  display: none;
}
</style>

發現側邊欄、導覽列、右方的設定按鈕沒有隱藏,所以手動加上吧。

第一種方式:

mounted() {
  const q = el => document.querySelector(el)
  q('.main-container').firstChild.classList.add('noPrint')
  q('.sidebar-container').classList.add('noPrint')
  q('.handle-button').classList.add('noPrint')
},

第二個方式,不過在此狀況下,因為 .main-content 是父元素,這情況就不適用了。

.main-container, .sidebar-container, .handle-button {
  display: none;
}

image

image