fix

src/views/OldHistoryPage.vue

@@ -35,7 +35,7 @@
 								<div class="operate_list" v-if="column?.Operations">
 									<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
 									<!-- <div class="operate_item" @click="renameCollection(record,index)">{{ $t('HistoryPage.Rename') }}</div> -->
-									<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
+									<div class="operate_item" @click="exportCanvas()">{{ $t('HomeView.Export') }}</div>
 									<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
 								</div>
 							</template>
@@ -74,7 +74,12 @@ import { formatTime } from "@/tool/util"
 import { Modal,message } from 'ant-design-vue';
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+import JSZip, { forEach } from "jszip";
+import html2canvas from "html2canvas";
+import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n';
+const FileSaver = require("file-saver");
 export default defineComponent({
     components: {
         HeaderComponent,
@@ -83,6 +88,7 @@ export default defineComponent({
     },
     setup() {
         let rangePickerValue:any = ref([])
+		const store = useStore();
         let renameData:any = ref({}) //修改名字选中的数据
         const columns:any = computed(()=>{
 			return [
@@ -111,6 +117,7 @@ export default defineComponent({
             collectionList,
             renameData,
 			t,
+			store,
         }
     },
     data(){
@@ -123,6 +130,7 @@ export default defineComponent({
             renameVisivle:false,//修改名字弹窗
             groupDetails:{},//每个collection的详情
             collectionName:'',//选中的名字
+			isShowMark: false, //导出的loading蒙层
             searchCollectionName:'',
         }
     },
@@ -224,10 +232,72 @@ export default defineComponent({
         //         }
         //     );
         // },
+		exportCanvas(){
+            let collectionReview:any = document.querySelector("#exportNewCoolection")
+            let a = document.createElement('a');
+            this.isShowMark = true
+            html2canvas(collectionReview,{useCORS:true,scale:3}).then((canvas) => {
+                let blob:any = dataURLtoBlob(canvas.toDataURL('image/png'));
+                let allBoardData:any = this.store.state.UploadFilesModule.allBoardData
+                let index = 0
+                let img = [
+                    {
+                        imgUrl:URL.createObjectURL(blob),
+                        name:'collection.png'
+                    }
+                ]
+                for(let key in allBoardData){
+                    if(key !== 'colorBoards' && key !== 'moodTemplateId'){
+                        for(let item of allBoardData[key]){
+                            let nameTail = item.imgUrl.split('.').pop()
+                            console.log(nameTail, 666)
+                            let data = {
+                                imgUrl:item.imgUrl,
+                                name:item.resData.name + index + '.' + nameTail
+                            }
+                            img.push(data)
+                            index ++
+                        }
+                    }
+                }
+                this.downImg(img)
+                // a.setAttribute('href', URL.createObjectURL(blob));
+                // a.setAttribute('download', `collection.png`);
+                // a.click();
+                
+            })
+        },
+		downImg(imagesParams:any) {
+            let _this:any = this;
+            let zip = new JSZip();
+            let cache:any = {};
+            let promises = [];
 
-        retrieveHome(record:any){
+            for (let item of imagesParams) {
-            this.$router.push({name:'home',params: {id:record.id}})
+                const promise = _this.getImgArrayBuffer(item.imgUrl).then((data:any) => {
-        }
+                // 下载文件, 并存成ArrayBuffer对象(blob)
+                zip.file(item.name, data, { binary: true }); // 逐个添加文件
+                cache[item.title] = data;
+                });
+                promises.push(promise);
+            }
+
+            Promise.all(promises)
+                .then(() => {
+                zip.generateAsync({ type: "blob" }).then((content:any) => {
+                    // 生成二进制流
+                    FileSaver.saveAs(
+                    content,
+                    'DesignFiles'
+                    ); // 利用file-saver保存文件  自定义文件名
+                    this.isShowMark = false
+                });
+                })
+                .catch((res) => {
+                    _this.message.error("Failed to export the file");
+                    this.isShowMark = false
+                });
+        },
     }
 })
 </script>
@@ -257,8 +327,12 @@ export default defineComponent({
             .history_page_body{
                 width: 100%;
                 height: calc(100% - 7rem);
-                padding: 0 2.5rem 4rem;
+                padding: 4rem 2.5rem 4rem;
+				margin-top: 4rem;
                 box-sizing: border-box;
+				top: 50%;
+				position: relative;
+				transform: translateY(-50%);
 
                 .history_header{
                     font-size: 1.8rem;