add: excel支持图片预览

2025-07-25 07:41:42 +08:00 · 2023-03-11 19:51:35 +08:00 · 2023-03-11 19:51:35 +08:00 · e9387c21c4
commit e9387c21c4
parent 0e59e49167
8 changed files with 301 additions and 109 deletions
--- a/examples/dist/assets/index-b1870083.js
+++ b/examples/dist/assets/index-b1870083.js
--- a/examples/dist/index.html
+++ b/examples/dist/index.html
@ -5,7 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
-    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-74060e95.js"></script>
+    <script type="module" crossorigin src="/vue-office/examples/dist/assets/index-b1870083.js"></script>
    <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-171e346f.css">
  </head>
  <body>
--- a/examples/dist/static/test-files/test.xlsx
+++ b/examples/dist/static/test-files/test.xlsx
--- a/examples/public/static/test-files/test.xlsx
+++ b/examples/public/static/test-files/test.xlsx
--- a/packages/excel/package.json
+++ b/packages/excel/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vue-office/excel",
-  "version": "0.2.5",
+  "version": "0.2.6",
  "description": "",
  "main": "lib/index.js",
  "files": [
--- a/packages/excel/src/excel.js
+++ b/packages/excel/src/excel.js
@ -17,6 +17,8 @@ const themeColor = [
    '#71AD47'
 ]

+let defaultColWidth = 80
+
 export function getData(src, options={}) {
    return fetchExcel(getUrl(src), options)
 }
@ -46,9 +48,9 @@ function transferColumns(excelSheet, spreadSheet, options){
    for(let i = 0;i < (excelSheet.columns || []).length; i++){
        spreadSheet.cols[i.toString()] = {}
        if(excelSheet.columns[i].width) {
-            spreadSheet.cols[i.toString()].width = excelSheet.columns[i].width * 9
+            spreadSheet.cols[i.toString()].width = excelSheet.columns[i].width * 6
        } else {
-            spreadSheet.cols[i.toString()].width = 100
+            spreadSheet.cols[i.toString()].width = defaultColWidth
        }
    }

@ -237,6 +239,7 @@ export function transferExcelToSpreadSheet(workbook, options){
    //console.log(workbookData, 'workbookData')
    return {
        workbookData,
+        workbookSource: workbook,
        medias: workbook.media || []
    }
 }
--- a/packages/excel/src/main.vue
+++ b/packages/excel/src/main.vue
@ -1,81 +1,140 @@
 <script>
-import { defineComponent,ref, onMounted, watch } from 'vue-demi'
+import {defineComponent, ref, onMounted, watch} from 'vue-demi';
 import Spreadsheet from "x-data-spreadsheet";
-import {getData, readExcelData, transferExcelToSpreadSheet} from './excel'
+import {getData, readExcelData, transferExcelToSpreadSheet} from './excel';
+import {renderImage, clearCache} from "./media";

 export default defineComponent({
-  name: 'VueOfficeExcel',
-  props: {
-    src: [String, ArrayBuffer, Blob],
-    requestOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    options: {
-      type: Object,
-      default: () => ({
-        minColLength: 20
-      })
-    }
-  },
-  emits:['rendered', 'error'],
-  setup(props, { emit }){
-    const wrapperRef = ref(null)
-    const rootRef = ref(null)
-    let xs = null
-    function renderExcel(buffer){
-      readExcelData(buffer).then(workbook =>{
-        if(!workbook._worksheets || workbook._worksheets.length === 0){
-          throw new Error('未获取到数据，可能文件格式不正确或文件已损坏')
-        }
-        const {workbookData, medias} = transferExcelToSpreadSheet(workbook, props.options)
-        xs.loadData(workbookData);
-        emit('rendered')
-      }).catch(e=>{
-        console.warn(e)
-        xs.loadData({})
-        emit('error', e)
-      })
-    }
-    onMounted(()=>{
-      window.xs = xs = new Spreadsheet(rootRef.value,{
-        mode: 'read',
-        showToolbar: false,
-        view: {
-          height: () => wrapperRef.value.clientHeight || 300,
-          width: () => wrapperRef.value.clientWidth || 300,
+    name: 'VueOfficeExcel',
+    props: {
+        src: [String, ArrayBuffer, Blob],
+        requestOptions: {
+            type: Object,
+            default: () => ({})
        },
-      }).loadData({});
-      if(props.src){
-        getData(props.src, props.requestOptions).then(renderExcel).catch(e =>{
-          xs.loadData({})
-          emit('error', e)
-        })
-      }
-    })
+        options: {
+            type: Object,
+            default: () => ({
+                minColLength: 20
+            })
+        }
+    },
+    emits: ['rendered', 'error'],
+    setup(props, {emit}) {
+        const wrapperRef = ref(null);
+        const rootRef = ref(null);
+        let workbookDataSource = {
+            _worksheets:[]
+        };
+        let mediasSource = [];
+        let sheetIndex = 1;
+        let ctx = null;
+        let xs = null;
+        let offset = null

-    watch(() => props.src, () =>{
-      if(props.src){
-        getData(props.src).then(renderExcel).catch(e =>{
-          xs.loadData({})
-          emit('error', e)
-        })
-      }else{
-        xs.loadData({})
-      }
-    })
-    return {
-      wrapperRef,
-      rootRef
+        function renderExcel(buffer) {
+            readExcelData(buffer).then(workbook => {
+                if (!workbook._worksheets || workbook._worksheets.length === 0) {
+                    throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
+                }
+                const {workbookData, medias, workbookSource} = transferExcelToSpreadSheet(workbook, props.options);
+                mediasSource = medias;
+                workbookDataSource = workbookSource;
+                offset = null
+                sheetIndex = 1
+                clearCache()
+                xs.loadData(workbookData);
+                renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+                emit('rendered');
+                //涉及clear和offset
+
+            }).catch(e => {
+                console.warn(e);
+                mediasSource = []
+                workbookDataSource = {
+                    _worksheets:[]
+                }
+                clearCache()
+                xs.loadData({});
+                emit('error', e);
+            });
+        }
+
+        onMounted(() => {
+            window.xs = xs = new Spreadsheet(rootRef.value, {
+                mode: 'read',
+                showToolbar: false,
+                view: {
+                    height: () => wrapperRef.value.clientHeight || 300,
+                    width: () => wrapperRef.value.clientWidth || 300,
+                },
+                row: {
+                    height: 24,
+                    len: 100
+                },
+                col: {
+                    len: 26,
+                    width: 80,
+                    indexWidth: 60,
+                    minWidth: 60,
+                }
+            }).loadData({});
+
+            let swapFunc = xs.bottombar.swapFunc
+            xs.bottombar.swapFunc = function (index) {
+                swapFunc.call(xs.bottombar, index)
+                sheetIndex = index + 1
+                setTimeout(()=>{
+                    xs.reRender()
+                    renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+                })
+
+            };
+            let clear = xs.sheet.editor.clear
+            xs.sheet.editor.clear = function (...args){
+                clear.apply(xs.sheet.editor, args)
+                setTimeout(()=>{
+                    renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+                })
+            }
+            let setOffset = xs.sheet.editor.setOffset
+            xs.sheet.editor.setOffset = function (...args){
+                setOffset.apply(xs.sheet.editor, args)
+                offset = args[0]
+                renderImage(ctx, mediasSource, workbookDataSource._worksheets[sheetIndex], offset);
+            }
+            const canvas = rootRef.value.querySelector('canvas');
+            ctx = canvas.getContext('2d');
+            if (props.src) {
+                getData(props.src, props.requestOptions).then(renderExcel).catch(e => {
+                    xs.loadData({});
+                    emit('error', e);
+                });
+            }
+        });
+
+        watch(() => props.src, () => {
+            if (props.src) {
+                getData(props.src).then(renderExcel).catch(e => {
+                    xs.loadData({});
+                    emit('error', e);
+                });
+            } else {
+                xs.loadData({});
+            }
+        });
+        return {
+            wrapperRef,
+            rootRef
+        };
    }
-  }
-})
+});
 </script>

 <template>
-  <div class="vue-office-excel" ref="wrapperRef">
-    <div class="vue-office-excel-main" ref="rootRef"></div>
-  </div>
+    <div class="vue-office-excel" ref="wrapperRef">
+        <div class="vue-office-excel-main" ref="rootRef"></div>
+    </div>
 </template>
 <style lang="less">

--- a/packages/excel/src/media.js
+++ b/packages/excel/src/media.js
@ -0,0 +1,130 @@
+let cache = []
+export function renderImage(ctx, medias, sheet, offset){
+    // console.log('medias',  medias)
+    // console.log('sheet',  sheet)
+    // console.log('offset',  offset)
+    if(sheet && sheet._media.length){
+        sheet._media.forEach(media => {
+            let {imageId, range, type} = media
+            if(type === "image"){
+                let position = calcPosition(sheet,range,offset)
+                drawImage(ctx,imageId, medias[imageId], position)
+            }
+        })
+    }
+
+}
+let clipWidth = 60 //左侧序号列宽
+let clipHeight = 25 //顶部序号行高
+let defaultColWidth = 80
+let defaultRowHeight = 24
+let devicePixelRatio = window.devicePixelRatio
+
+function calcPosition(sheet, range, offset){
+
+    let {tl={}, br={}} = range
+    let {nativeCol, nativeColOff, nativeRow, nativeRowOff} = tl
+
+    let basicX = clipWidth
+    let basicY = clipHeight
+    for(let i=0; i < nativeCol; i++){
+        basicX += sheet?._columns?.[i]?.width*6 || defaultColWidth
+    }
+    for(let i=0; i < nativeRow; i++){
+        basicY += sheet?._rows?.[i]?.height || defaultRowHeight
+    }
+    let x = basicX + nativeColOff/12700
+    let y = basicY + nativeRowOff/12700
+
+    let {
+        nativeCol: nativeColEnd,
+        nativeColOff: nativeColOffEnd,
+        nativeRow: nativeRowEnd,
+        nativeRowOff: nativeRowOffEnd
+    } = br
+    let width
+    if(nativeCol === nativeColEnd){
+        width = (nativeColOffEnd - nativeColOff) / 12700
+    }else {
+        width = (sheet?._columns?.[nativeCol]?.width*6 || defaultColWidth) - nativeColOff/12700
+
+        for(let i = nativeCol+1; i < nativeColEnd; i++){
+            width += sheet?._columns?.[i]?.width*6 || defaultColWidth
+        }
+        width += nativeColOffEnd / 12700
+    }
+    let height
+    if(nativeRow === nativeRowEnd){
+        height = (nativeRowOffEnd - nativeRowOff) / 12700
+    }else {
+        height = (sheet?._rows?.[nativeRow]?.height || defaultRowHeight) - nativeRowOff/12700
+        for(let i = nativeRow+1; i < nativeRowEnd; i++){
+            height += sheet?._rows?.[i]?.height || defaultRowHeight
+        }
+        height += nativeRowOffEnd / 12700
+    }
+
+    return {
+        x: (x - (offset?.scroll?.x || 0)) * devicePixelRatio,
+        y: (y - (offset?.scroll?.y || 0)) * devicePixelRatio,
+        width: width * devicePixelRatio,
+        height: height * devicePixelRatio
+    }
+}
+export function clearCache(){
+    cache = []
+}
+
+function drawImage(ctx,index, data, position){
+    getImage(index, data).then(image=>{
+        let sx = 0
+        let sy = 0
+        let sWidth = image.width
+        let sHeight = image.height
+        let dx = position.x
+        let dy = position.y
+        let dWidth = position.width
+        let dHeight = position.height
+        let scaleX = dWidth / sWidth
+        let scaleY = dHeight / sHeight
+
+        if(dx < clipWidth * devicePixelRatio){
+            let diff = clipWidth * devicePixelRatio - dx
+            dx = clipWidth * devicePixelRatio
+            dWidth -= diff
+            sWidth -= diff/scaleX
+            sx += diff/scaleX
+        }
+        if(dy < clipHeight * devicePixelRatio){
+            let diff = clipHeight * devicePixelRatio - dy
+            dy = clipHeight * devicePixelRatio
+            dHeight -= diff
+            sHeight -= diff/scaleY
+            sy += diff/scaleY
+        }
+        // console.log('=>', sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+        ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
+    }).catch(e=>{
+
+    })
+}
+function getImage(index, data){
+    return  new Promise(((resolve, reject) => {
+        if(cache[index]){
+            return resolve(cache[index])
+        }
+        const {buffer, extension} = data.buffer;
+        let blob = new Blob([buffer], { type: 'image/' +  extension});
+        let url = URL.createObjectURL(blob);
+        let image = new Image();
+        image.src = url;
+        image.onload = function (){
+            resolve(image)
+            cache[index] = image
+        }
+        image.onerror = function (e){
+            reject(e)
+        }
+    }))
+
+}