Merge pull request #331 from kaola-fed/bugfix_klimagepreview_20180321

修复组件KLImagePreview图片点击下载直接在当前页面打开图片的问题
kaola-fed · Mar 29, 2018 · 19853b9 · 19853b9
2 parents 532d750 + 7132c5b
commit 19853b9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/doc/source/doc.js b/doc/source/doc.js
@@ -108,7 +108,7 @@ const doc = (isDev, callback) => {
   // 组件文档
   CATES.forEach((c) => {
     const components = getComponents(c.cate).filter((comp) => {
-      if (isDev && !/^KL(Sidebar|Menu|Button|Table|Select|MultiSelect)$/.test(comp)) {
+      if (isDev && !/^KL(Sidebar|Upload|Menu|Button|Table|Select|MultiSelect)$/.test(comp)) {
         return false;
       }
 

diff --git a/src/js/components/widget/KLImagePreview/index.html b/src/js/components/widget/KLImagePreview/index.html
@@ -15,7 +15,7 @@
                 {#list opList as op}
                     <li class="m-btn-item" r-style={{"margin-right": op.name === 'zoomIn' ? '30px' : 0}}>
                         {#if (imageList[curIndex].status === 'success' || imageList[curIndex].status === undefined) && op.name === 'remove'}
-                            <a class="u-download" href={imageList[curIndex].src} download={imageList[curIndex].name}><i class="u-icon u-icon-export"></i></a>
+                            <a class="u-download" href="javascript:void(0);"  on-click={this.downloadFile(imageList[curIndex])}><i class="u-icon u-icon-export"></i></a>
                         {#elseif op.name === 'zoomIn'}
                             <i class="u-icon u-icon-{op.icon}" on-click={this[op.fnName].bind(this)(curIndex)}></i>
                             <span class="u-scale">{parseInt(virtualInfo.scale * 100)}%</span>

diff --git a/src/js/components/widget/KLImagePreview/index.js b/src/js/components/widget/KLImagePreview/index.js
@@ -348,6 +348,16 @@ const KLImagePreview = Component.extend({
       minTranslateY: minDeltaY < 0 ? minDeltaY : 0,
     };
   },
+  downloadFile(file) {
+    const a = document.createElement('a');
+    a.download = file.name;
+    fetch(file.src).then(res => res.blob().then((blob) => {
+      const blobUrl = window.URL.createObjectURL(blob);
+      a.href = blobUrl;
+      a.click();
+      window.URL.revokeObjectURL(blobUrl);
+    }));
+  },
 });
 
 module.exports = KLImagePreview;