Vue | 用js修改列印方向 讓各頁面可自訂橫向或直向列印

前文

如何用js修改列印方向 用中文查這個問題十分的無解，所幸查英文關鍵字換了3種方式就找到對應的問題了，先感謝 StackOverflow 上的這位老哥用最樸實的 js 方式回答這個大部分人都會以 css @page 設定解決的問題QQ
單純設定@print @page這個誰不會喇~~(吶喊
甚至還有看到說這個問題無解的仁兄Orz
那就由YUKI來寫中文版解法吧!!
說實在也不是件難事，就是將這份 js 改寫成 vue 能用的配置，實際測試過也是可以順利使用的喔!
(甚至通過了 chrome 49 的測試XD)

問題點

Vue只能在app的地方引入列印的css設定，比如你一開始設定是portrait的話，每個頁面都會套用，沒辦法在各元件 style scoped 的地方再設定一個 @media print 覆蓋過去。
但如果專案是要每個不同元件頁面是不同文件做列印，有些要印直的、有些橫的，那怎麼辦呢?!

解法

新增一個變數將@page設定的字與依據傳進來的參數決定是portrait(直式)還是 landscape(橫式)存進去，並用js設定在網頁的head標籤裡就可以了!
將下面的程式碼綁在需要列印的元件頁面的methods裡，並且在mounted()階段觸發一次後，head標籤裡就會有print的設定了。

//methods
function changePrintOrietation(orientation){
      var css = css = `@page { size: A4 ${orientation}; margin: 0.5cm 0.5cm; }`;
      var head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
      style.media = 'print';

      if (style.styleSheet){ 
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
      head.appendChild(style);
    }

然後在要觸發列印的按鈕綁上 window.print(); ，就能列印想要的紙張方向了!

//template
<div class="printbutton">
      <a  (0)" click="window.print();" >
        列印
      </a>
</div>

如果原本有在app.vue引入print用的css，要記得把@page這個設定刪掉，其餘在@media print裡的設定可以留著，不影響。

用點擊按鈕轉換列印方向

為了放上codepen可以讓人操作看看又改動了一些部分，透過button在同頁切換列印的方向，並修正了多於一次觸發function會新增重複style的部分~
改完也蠻有成就感的:3

那就來切換看看吧! 要點進 codepen 裡嘗試喔~~
console 裡也可以看看切換的訊息唷!

問題參考文章:
https://stackoverflow.com/questions/39025840/change-window-print-paper-orientation