engineercms分享文件提取碼-完結

雖然有藍眼網盤參考，可還是費了九牛二虎之力，折騰了一個多星期，總算弄好。遇到以下幾個問題：
1.香港那個商人說地段地段還是地段，前端，前端，前端，爲了致敬（toulan）藍眼網盤，乾脆就在它上面改了，不過原版的是vue.js，我直接改html，也是醉了。因爲vue.js需要打包，很麻煩，沒html來得直接。




2.上圖中點擊1位置，展開，先關閉所有的，再展開當前這個。
用document.getElementsByClassName取出數組，循環都關閉，然後打開當前，當前的用 document.getElementById()精確獲取。
3.點擊2位置下載，這個攜帶文件id和shareuuid，及提取碼code，用fetch，blob等元素模擬<a標籤來下載res => res.blob().then(blob =>。這裏涉及中文名稱問題，見下文。
4.點擊3位置，zip下載。這個遇到了以下幾個問題：
1）壓縮文件開始用的golang的tar.gz，手機上打不開；換成zip格式的。
2）golang的gzip默認不支持中文路徑，需要加上.Format = tar.FormatGNU；
3）下載的文件名是%E8%AF%95%E9%AA%8C%E6%AE%B5%E9%A1%B9%E7%9B%AE%E7%9B%BE%E6%9E%84.tar.gz
獲取響應頭中的附件名稱：var filename = res.headers.get('Content-Disposition').split(';')[1].split('=')[1];
加上解碼a.download = decodeURI(filename);
開始一直走了彎路，以爲是服務端需要先編碼

// query := url.Values{}
// query.Add("filename", prod.Title+".tar.gz")

// filename := query.Encode()

再加到響應頭中：
res.setHeader("Content-Disposition", "attachment; filename* = UTF-8''"+name);
實際上beego的c.Ctx.Output.Download()看它源碼，已經這樣處理過了：編碼+響應頭。
所以，在前端解碼decodeURI一下就行了。




上圖紅圈的中的複製功能，用了ClipboardJS，麻煩的是在模態框中使用，也是一頓爆搜。

    new ClipboardJS('.mr15', {
      container: document.getElementById('copyuuid')
    });
    new ClipboardJS('.mr15', {
      container: document.getElementById('copycode')
    });

    function copyuuid() {
      var clipboard = new ClipboardJS("#btncopy", {
        text: function() {
          //尋找被激活的那個div pre元素,同時獲取它下面的內容
          return '鏈接:' + $("span#copyuuid").text() + ' 提取碼:' + $("span#copycode").text();
        }
      });
      clipboard.on('success', function(e) {
        alert("複製成功，去粘貼試試吧！");
        //可執行其他代碼操作
      });
      clipboard.on('error', function(e) {
        alert("複製失敗！請手動複製")
      });
    }