update

src/components/pages/race/eventCenter/myAnli.vue

@@ -13,14 +13,11 @@
         <div class="anliMiddle">
           <div class="anliBox">
             <div class="anliImg">
-              <img
-                :src="
-                  JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
-                    ? JSON.parse(an.info).cover[0].url
-                    : noBanner
-                "
-                alt=""
-              />
+              <img :src="
+                JSON.parse(an.info).cover && JSON.parse(an.info).cover.length
+                  ? JSON.parse(an.info).cover[0].url
+                  : noBanner
+              " alt="" />
             </div>
             <div class="anliNav">
               <div>项目名称：{{ JSON.parse(an.info).title }}</div>
@@ -39,24 +36,13 @@
                 </div>
                 <div class="autorBox" v-if="JSON.parse(an.info).autor.length">
                   <div>联系人：</div>
-                  <div
-                    class="Autor"
-                    v-for="(a, aIndex) in JSON.parse(an.info).autor"
-                    :key="aIndex"
-                  >
+                  <div class="Autor" v-for="(a, aIndex) in JSON.parse(an.info).autor" :key="aIndex">
                     {{ a.sn }}
                   </div>
                 </div>
-                <div
-                  class="autorBox"
-                  v-if="JSON.parse(an.info).tableData.length"
-                >
+                <div class="autorBox" v-if="JSON.parse(an.info).tableData.length">
                   <div>协作者：</div>
-                  <div
-                    class="Autor"
-                    v-for="(a, aIndex) in JSON.parse(an.info).tableData"
-                    :key="aIndex"
-                  >
+                  <div class="Autor" v-for="(a, aIndex) in JSON.parse(an.info).tableData" :key="aIndex">
                     {{ a.sn }}
                   </div>
                 </div>
@@ -79,11 +65,7 @@
               编辑
             </div>
             <div class="rightButton" @click="deleteAnli(an.id)">删除</div>
-            <div
-              class="rightButton"
-              style="background: #225ac7"
-              @click="lookDetail(an.id)"
-            >
+            <div class="rightButton" style="background: #225ac7" @click="lookDetail(an.id)">
               查看详情
             </div>
           </div>
@@ -145,7 +127,7 @@ export default {
               console.error(err);
             });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     deleteAnli(id) {
       this.$confirm("确定删除此案例吗？", "提示", {
@@ -170,7 +152,7 @@ export default {
               console.error(err);
             });
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     exportAnli(res) {
       console.log(res);
@@ -188,7 +170,7 @@ export default {
       var _div = document.createElement("div");
       for (var i = 0; i < info.data.length; i++) {
         var _div2 = document.createElement("div");
-        _div2.innerHTML = ` <a href="${info.data[i].url}" target="downloadFile">${info.data[i].name}</a>`;
+        _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${info.data[i].url}')">${info.data[i].name}</a>`;
         _div.appendChild(_div2);
       }
       _title += `<div>${_div.innerHTML}</div>`;
@@ -204,15 +186,13 @@ export default {
       ];
       for (var k = 0; k < oArray.length; k++) {
         _overview += `<h2>${oArray[k].name}</h2>`;
-        //       <a :href="`${完整的下载地址}`" target="downloadFile">{{文件名称}}</a>
+        //       <a :href="`${完整的下载地址}`" onclick="downloadFile2>{{文件名称}}</a>
         // <iframe style="display: none;" name="downloadFile"></iframe>
         _overview += `<div>${overview[oArray[k].j].brief}</div>`;
         var _div = document.createElement("div");
         for (var i = 0; i < overview[oArray[k].j].data.length; i++) {
           var _div2 = document.createElement("div");
-          _div2.innerHTML = ` <a href="${
-            overview[oArray[k].j].data[i].url
-          }" target="downloadFile">${overview[oArray[k].j].data[i].name}</a>`;
+          _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${overview[oArray[k].j].data[i].url}')">${overview[oArray[k].j].data[i].name}</a>`;
           _div.appendChild(_div2);
         }
         _overview += `<div>${_div.innerHTML}</div>`;
@@ -241,11 +221,8 @@ export default {
             var _div = document.createElement("div");
             for (var c = 0; c < _act[z][pAarray[i].j].data.length; c++) {
               var _div2 = document.createElement("div");
-              _div2.innerHTML = ` <a href="${
-                _act[z][pAarray[i].j].data[c].url
-              }" target="downloadFile">${
-                _act[z][pAarray[i].j].data[c].name
-              }</a>`;
+              _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${_act[z][pAarray[i].j].data[c].url}')">${_act[z][pAarray[i].j].data[c].name
+                }</a>`;
               _div.appendChild(_div2);
             }
             _process += `<div>${_div.innerHTML}</div>`;
@@ -261,7 +238,7 @@ export default {
         var _div = document.createElement("div");
         for (var i = 0; i < process[pz].data.length; i++) {
           var _div2 = document.createElement("div");
-          _div2.innerHTML = ` <a href="${process[pz].data[i].url}" target="downloadFile">${process[pz].data[i].name}</a>`;
+          _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${process[pz].data[i].url}')">${process[pz].data[i].name}</a>`;
           _div.appendChild(_div2);
         }
         _proact += `<div>${_div.innerHTML}</div>`;
@@ -275,7 +252,7 @@ export default {
       var _div = document.createElement("div");
       for (var i = 0; i < proexc.data.length; i++) {
         var _div2 = document.createElement("div");
-        _div2.innerHTML = ` <a href="${proexc.data[i].url}" target="downloadFile">${proexc.data[i].name}</a>`;
+        _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${proexc.data[i].url}')">${proexc.data[i].name}</a>`;
         _div.appendChild(_div2);
       }
       _proexc += `<div>${_div.innerHTML}</div>`;
@@ -288,7 +265,7 @@ export default {
       var _div = document.createElement("div");
       for (var i = 0; i < results.data.length; i++) {
         var _div2 = document.createElement("div");
-        _div2.innerHTML = ` <a href="${results.data[i].url}" target="downloadFile">${results.data[i].name}</a>`;
+        _div2.innerHTML = ` <a href="JavaScript:void(0)" onclick="downloadFile2('${results.data[i].url}')">${results.data[i].name}</a>`;
         _div.appendChild(_div2);
       }
       _results += `<div>${_div.innerHTML}</div>`;
@@ -307,18 +284,9 @@ export default {
       // 将html文件中需要用到的数据挂载到store上
       this.$store.commit("update", ["report", a]);
       console.log(this.$store.state.report);
-      const content = `<!DOCTYPE html>
-      <html lang="en">
-      <head>
-          <meta charset="UTF-8">
-          <meta http-equiv="X-UA-Compatible" content="IE=edge">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <title>报告</title>
-      </head>
-      <body>
-      ${this.$store.state.report}
-      </body>
-      </html>`;
+      const content = "<!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n          <meta charset=\"UTF-8\">\n          <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n          <title>报告</title>\n      </head>     \n      <body>"+
+      this.$store.state.report+
+      '</body>\n      \x3Cscript>\n      function downloadFile2(url) {\n        let _url = "";\n          _url = url;\n        const x = new XMLHttpRequest();\n        x.open("GET", _url, true);\n        x.responseType = "blob";\n        x.onload = function (e) {\n          let content = x.response;\n          let elink = document.createElement("a");\n          elink.download = decodeURI(\n            _url.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]\n          );\n          elink.style.display = "none";\n          let blob = new Blob([content]);\n          elink.href = URL.createObjectURL(blob);\n          document.body.appendChild(elink);\n          elink.click();\n          document.body.removeChild(elink);\n        };\n        x.send();\n      }\n      \x3C/script>\n      </html>';
       // debugger
       // 生成报告
       const link = document.createElement("a");
@@ -356,10 +324,12 @@ export default {
   .xmjj {
     width: 70% !important;
   }
+
   .noAnliBox {
     width: 300px !important;
   }
 }
+
 .myAnliBox {
   /* height: 500px; */
   overflow: auto;
@@ -367,10 +337,12 @@ export default {
   height: 100%;
   /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
 }
+
 .center_content {
   width: 100%;
   height: 100%;
 }
+
 .anLi {
   background: #fff;
   width: 95%;
@@ -378,6 +350,7 @@ export default {
   border-radius: 10px;
   height: 200px;
 }
+
 .anliTop {
   display: flex;
   flex-direction: row;
@@ -385,6 +358,7 @@ export default {
   align-items: center;
   justify-content: space-between;
 }
+
 .anliTopLeft {
   display: flex;
   flex-direction: row;
@@ -393,25 +367,31 @@ export default {
   color: #afafaf;
   padding: 20px 0 10px 30px;
 }
-.anliTopLeft > div:nth-child(2) {
+
+.anliTopLeft>div:nth-child(2) {
   padding-left: 20px;
 }
+
 .anliTopRight {
   padding: 20px 30px 10px 0;
 }
+
 .anliMiddle {
   padding: 0 0 5px 30px;
 }
+
 .anliImg {
   width: 200px;
   height: 115px;
   min-width: 200px;
 }
-.anliImg > img {
+
+.anliImg>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
+
 .people {
   display: flex;
 }
@@ -420,33 +400,39 @@ export default {
   margin-left: 10px;
   line-height: 18px;
 }
+
 .man {
   width: 16px;
   height: 16px;
 }
 
-.man > img {
+.man>img {
   width: 100%;
   height: 100%;
 }
+
 .anliBox {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: flex-start;
 }
+
 .anliNav {
   padding-left: 30px;
   width: 100%;
 }
-.anliNav > div:nth-child(1) {
+
+.anliNav>div:nth-child(1) {
   font-size: 20px;
   /* font-weight: bold; */
 }
-.anliNav > div:nth-child(2) {
+
+.anliNav>div:nth-child(2) {
   /* font-weight: bold; */
   margin: 10px 0 10px 0;
 }
+
 .xmjj {
   color: #aba8a8;
   margin-bottom: 10px;
@@ -455,6 +441,7 @@ export default {
   text-overflow: ellipsis;
   width: 80%;
 }
+
 .anliBottom {
   display: flex;
   flex-direction: row;
@@ -463,15 +450,18 @@ export default {
   justify-content: space-between;
   margin: -10px 10px 0 30px;
 }
+
 .bottomLeft {
   margin-top: 5px;
 }
+
 .bottomRight {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
+
 .rightButton {
   background: #499eef;
   color: #fff;
@@ -485,20 +475,24 @@ export default {
   margin-right: 20px;
   padding: 0 15px;
 }
+
 .noAnliBox {
   width: 500px;
   margin: 20px auto;
 }
-.noAnliBox > img {
+
+.noAnliBox>img {
   width: 100%;
   height: 100%;
 }
+
 .personAndAutor {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
 }
+
 .autorBox {
   display: flex;
   flex-direction: row;
@@ -506,6 +500,7 @@ export default {
   align-items: center;
   margin-left: 10px;
 }
+
 .Autor {
   margin: 0 5px;
 }