上传图纸增加下载功能

src/api/mes/pro/process.js

@@ -52,3 +52,13 @@ export function delProcess(processId) {
     method: 'delete'
   })
 }
+
+// 下载图纸文件
+export function download(filepath) {
+  return request({
+    url: filepath,
+    method: 'get',
+    responseType: 'arraybuffer'
+  })
+}
+

src/views/mes/pro/productionSolution/components/uploadTuzhi.vue

@@ -41,6 +41,7 @@
             <el-table-column align="center" label="操作" >
                 <template slot-scope="scope">
                     <el-button size="small" type="primary" @click="delItem(scope.row, scope.$index)">删除</el-button>
+                    <el-button size="small" type="primary" @click="download(scope.row, scope.$index)">下载</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -50,6 +51,7 @@
   </div>
 </template>
 <script>
+import {download} from "@/api/mes/pro/process";
 import { getToken } from "@/utils/auth";
 export default {
     props: {
@@ -82,9 +84,46 @@ export default {
     created (){
     },
     methods: {
-        openFilename(row) {
-            const url = this.baseURL + row.filePath
-            window.open(url, "_blank")
+        download(row) {
+            download(row.filePath).then(res => {
+                if(['png', 'jpeg', 'jpg'].indexOf(row.fileOriginalName.substring(row.fileOriginalName.lastIndexOf('.') + 1)) > -1) {
+                    const imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
+                    // 将图片的src属性作为URL地址
+                    const a = document.createElement('a')
+                    const event = new MouseEvent('click')
+                    a.download = row.fileOriginalName // '下载图片名称'
+                    a.href = imgUrl // base图片地址
+                    a.dispatchEvent(event)
+                } else {
+                    let blob = new Blob([res]);
+                    //创建读取文件FileReader
+                    let reader = new FileReader();
+                    reader.readAsText(blob, "utf-8");
+                    reader.onload = () => {
+                        try{//这里返回的数据是JSON格式
+                            //此处对fileReader读出的结果进行JSON解析
+                            //会出现错误，需要进行捕获
+                            let res = JSON.parse(reader.result);
+                            //文件不存在或出现错误
+                            console.log(res);
+                            //弹出提示
+                            //根据你业务处理
+                    
+                        }catch(err){//捕获异常 无法解析JSON格式 这里返回的数据是文件流 可供下载
+                            console.log("pdf存在",res)
+                            //以'a'标签的形式自点击下载
+                            let downloadElement = document.createElement("a");
+                            let href = window.URL.createObjectURL(blob); //创建下载的链接
+                            downloadElement.href = href;
+                            downloadElement.download = row.fileOriginalName; //下载后文件名
+                            document.body.appendChild(downloadElement);
+                            downloadElement.click(); //点击下载
+                            document.body.removeChild(downloadElement); //下载完成移除元素
+                            window.URL.revokeObjectURL(href); //释放掉blob对象
+                        }
+                    }
+                }
+            })
         },
         beforeClose(done) {
         // 更新父组件的processItemList