yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-25 07:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

add: excel支持图片预览

Browse Source
This commit is contained in:
liyulin 2023-03-11 19:51:35 +08:00
parent 0e59e49167
commit e9387c21c4
8 changed files with 301 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
examples/dist/assets/index-74060e95.js → examples/dist/assets/index-b1870083.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/dist/index.html vendored
View File

@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vue-office/examples/dist/vite.svg" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <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"> <link rel="stylesheet" href="/vue-office/examples/dist/assets/index-171e346f.css">
</head> </head>
<body> <body>

BIN
examples/dist/static/test-files/test.xlsx vendored
View File

Binary file not shown.

BIN
examples/public/static/test-files/test.xlsx
View File

Binary file not shown.

2
packages/excel/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vue-office/excel", "name": "@vue-office/excel",
"version": "0.2.5", "version": "0.2.6",
"description": "", "description": "",
"main": "lib/index.js", "main": "lib/index.js",
"files": [ "files": [

7
packages/excel/src/excel.js
View File

@ -17,6 +17,8 @@ const themeColor = [
'#71AD47' '#71AD47'
] ]
let defaultColWidth = 80
export function getData(src, options={}) { export function getData(src, options={}) {
return fetchExcel(getUrl(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++){ for(let i = 0;i < (excelSheet.columns || []).length; i++){
spreadSheet.cols[i.toString()] = {} spreadSheet.cols[i.toString()] = {}
if(excelSheet.columns[i].width) { 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 { } 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') //console.log(workbookData, 'workbookData')
return { return {
workbookData, workbookData,
workbookSource: workbook,
medias: workbook.media || [] medias: workbook.media || []
} }
} }

195
packages/excel/src/main.vue
View File

@ -1,81 +1,140 @@
<script> <script>
import { defineComponent,ref, onMounted, watch } from 'vue-demi' import {defineComponent, ref, onMounted, watch} from 'vue-demi';
import Spreadsheet from "x-data-spreadsheet"; 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({ export default defineComponent({
name: 'VueOfficeExcel', name: 'VueOfficeExcel',
props: { props: {
src: [String, ArrayBuffer, Blob], src: [String, ArrayBuffer, Blob],
requestOptions: { requestOptions: {
type: Object, type: Object,
default: () => ({}) 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,
}, },
}).loadData({}); options: {
if(props.src){ type: Object,
getData(props.src, props.requestOptions).then(renderExcel).catch(e =>{ default: () => ({
xs.loadData({}) minColLength: 20
emit('error', e) })
}) }
} },
}) 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, () =>{ function renderExcel(buffer) {
if(props.src){ readExcelData(buffer).then(workbook => {
getData(props.src).then(renderExcel).catch(e =>{ if (!workbook._worksheets || workbook._worksheets.length === 0) {
xs.loadData({}) throw new Error('未获取到数据，可能文件格式不正确或文件已损坏');
emit('error', e) }
}) const {workbookData, medias, workbookSource} = transferExcelToSpreadSheet(workbook, props.options);
}else{ mediasSource = medias;
xs.loadData({}) workbookDataSource = workbookSource;
} offset = null
}) sheetIndex = 1
return { clearCache()
wrapperRef, xs.loadData(workbookData);
rootRef 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> </script>
<template> <template>
<div class="vue-office-excel" ref="wrapperRef"> <div class="vue-office-excel" ref="wrapperRef">
<div class="vue-office-excel-main" ref="rootRef"></div> <div class="vue-office-excel-main" ref="rootRef"></div>
</div> </div>
</template> </template>
<style lang="less"> <style lang="less">

130
packages/excel/src/media.js Normal file
View File

@ -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)
}
}))
}