feat: 添加word抓取图片功能

api/convertApi.js

 import service from '@utils/GraphApiService'
-
+import request from '@utils/requestService'
 export function fetchCnToCpc(baseURL, data) {
   return service({
     baseURL: baseURL,
@@ -44,4 +44,14 @@ export function fetchDownloadFile(baseURL, params) {
     responseType: 'blob',
     params
   })
+}
+
+export function fetchWordPic(baseURL, data) {
+  return request({
+    baseURL: baseURL,
+    url: 'api/Aspose/GetWordAllPic',
+    method: 'post',
+    responseType: 'blob',
+    data
+  })
 }
\ No newline at end of file

package-lock.json

 {
   "name": "@purplevin/component",
-  "version": "0.1.14",
+  "version": "0.1.22",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@purplevin/component",
-      "version": "0.1.14",
+      "version": "0.1.22",
       "dependencies": {
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "element-ui": "2.15.8",
+        "file-saver": "^2.0.5",
         "moment": "^2.29.4",
         "vue": "2.6.14",
         "vuex": "^3.4.0",
@@ -6339,6 +6340,11 @@
         "webpack": "^4.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -19529,6 +19535,11 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "2.15.8",
+    "file-saver": "^2.0.5",
     "moment": "^2.29.4",
     "vue": "2.6.14",
     "vuex": "^3.4.0",

packages/convertTool/src/components/WordGrabPic.vue

+<template>
+<div>
+    <h3>word抓取图片</h3>
+    <el-alert title="此功能将协助您将word内的图片进行抓取" type="info" />
+    <br>
+    <el-form ref="visioForm" :model="form" size="small" label-width="160px">
+    <el-row>
+        <el-col :span="16">
+            <el-form-item label="文档" prop="file">
+                <el-upload
+                ref="upload"
+                class="upload-demo"
+                drag
+                :limit="1"
+                :file-list="fileList"
+                :action="uploadURL"
+                :on-change="handelFileChange"
+                :on-remove="handleFileRemove"
+                :on-exceed="handleExceed"
+                :auto-upload="false"
+                accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                >
+                <i class="el-icon-upload" />
+                <div class="el-upload__text">
+                    将文件拖到此处，或<em>点击上传</em>
+                </div>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="最大宽度：">
+                <el-input  v-model="form.MaxWidthCm" style="width:358px" ></el-input>
+            </el-form-item>
+            <el-form-item label="最大高度：">
+                <el-input  v-model="form.MaxHeightCm" style="width:358px"></el-input>
+            </el-form-item>
+            <el-form-item label="Dpi：">
+                <el-input  v-model="form.Dpi" style="width:358px"></el-input>
+            </el-form-item>
+        </el-col>
+
+    </el-row>
+    <el-row>
+        <el-col :span="12" :offset="10">
+        <el-button
+            style="margin-left: 10px"
+            size="small"
+            type="success"
+            @click="submitUpload"
+        >
+            下载档案
+        </el-button>
+        </el-col>
+    </el-row>
+    </el-form>
+</div>
+</template>
+<script>
+import {fetchWordPic} from "@api/convertApi"
+import { saveAs } from 'file-saver'
+export default {
+name: 'GrabPic',
+data: function() {
+    return {
+    form: {
+        MaxWidthCm: '',
+        MaxHeightCm: '',
+        Dpi: ''
+
+    },
+    uploadURL: 'Aspose/GetWordAllPic',
+    fileList: []
+    }
+},
+props:{
+    baseUrl:{
+    type: String
+    }
+},
+methods: {
+    // 上传到服务器
+    async  submitUpload() {
+        if (this.fileList.length <= 0) {
+            this.$message.error('请先选择需要上传的文件！')
+            return false
+        }
+        window._paq && window._paq.push(['trackEvent', 'Tool', 'Click', '公式转换图片'])
+        const formData = new FormData()
+        formData.append('file', this.fileList[0].raw)
+        formData.append('MaxWidthCm', this.form.MaxWidthCm)
+        formData.append('MaxHeightCm', this.form.MaxHeightCm)
+        formData.append('Dpi', this.form.Dpi)
+        await fetchWordPic(this.baseUrl,formData).
+        then(res=>{
+            const blob = new Blob([res])
+            saveAs(blob, `${this.fileList[0].name}.zip`)
+            this.$message({
+                showClose: true,
+                message: `档案下载成功！`,
+                type: 'success'
+            })
+        }).catch((r) => {
+            console.error(r)
+            this.$message({
+                showClose: true,
+                message: `下载文件出现错误，请联系管理员！`,
+                type: 'error'
+            })
+        })
+
+    },
+    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+    handelFileChange(file, fileList) {
+    // 存在文件标识
+    let existsFileFlag = false
+
+    for (let i = 0; i < this.fileList.length; i++) {
+        if (
+        file.name === this.fileList[i].name &&
+        file.size === this.fileList[i].size
+        ) {
+        // 如果存在了，赋值true
+        existsFileFlag = true
+        }
+    }
+    // 遍历的这个文件存在当前列表直接结束
+    if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+        showClose: true,
+        message: `文件已经选择过了：${file.name})`,
+        type: 'error'
+        })
+        return
+    }
+    this.fileList.push(file)
+    },
+    handelDetailFileChange(file, fileList) {
+    // 存在文件标识
+    let existsFileFlag = false
+        
+    for (let i = 0; i < this.detailFileList.length; i++) {
+        if (
+        file.name === this.detailFileList[i].name &&
+        file.size === this.detailFileList[i].size
+        ) {
+        // 如果存在了，赋值true
+        existsFileFlag = true
+        }
+    }
+    // 遍历的这个文件存在当前列表直接结束
+    if (existsFileFlag) {
+        // 否则不加入
+        fileList.pop()
+        // console.log(`文件已经存在：${file.name}`)
+        // this.handleMsg(`文件已经选择过了：${file.name})`);
+        this.$message({
+        showClose: true,
+        message: `文件已经选择过了：${file.name})`,
+        type: 'error'
+        })
+        return
+    }
+    this.detailFileList.push(file)
+    },
+    // 文件列表移除文件时的钩子
+    handleFileRemove(file, fileList) {
+    this.fileList = fileList
+    },
+    handleDetailFileRemove(file, fileList) {
+    this.detailFileList = fileList
+    },
+    handleExceed(files, fileList) {
+    this.$set(fileList[0], 'raw', files[0])
+    this.$set(fileList[0], 'name', files[0].name)
+    this.$refs['rebateUpload'].clearFiles()// 清除文件
+    this.$refs['rebateUpload'].handleStart(files[0])// 选择文件后的赋值方法
+
+    }
+}
+}
+</script>
\ No newline at end of file

packages/convertTool/src/index.vue

@@ -14,6 +14,9 @@
         :showDownloadSampleButton="showDownloadSampleButton"
         @on-downloadSampleClick="handleDownloadSampleClick" />
       </el-tab-pane>
+      <el-tab-pane label="word抓取图片">
+        <grab-pic :baseUrl="wordUrl"/>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -23,9 +26,15 @@ import '@src/styles/theme/index.css'
 import Cn2CpcForm from './components/Cn2CpcForm'
 import Cn2PctForm from './components/Cn2PctForm'
 import VisioForm from './components/VisioForm'
+import GrabPic from './components/WordGrabPic'
 import Pct2CnForm from './components/Pct2CnForm'
 export default {
   name: 'ConvertTool',
+  data() {
+    return {
+      wordUrl: 'https://dev.essenptl.com/dev2/wade_ext'
+    }
+  },
   props:{
     baseUrl:{
       type: String,
@@ -41,7 +50,8 @@ export default {
     Cn2CpcForm,
     Cn2PctForm,
     VisioForm,
-    Pct2CnForm
+    Pct2CnForm,
+    GrabPic
   },
   methods: {
     handleDownloadSampleClick(type){