|
|
@@ -0,0 +1,295 @@
|
|
|
+
|
|
|
+export default{
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ json:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ jsonToHtml(json){
|
|
|
+ var {width,height} = json.size
|
|
|
+ var slides = json.slides
|
|
|
+ var html = ''
|
|
|
+ for(let {item,index} in slides){
|
|
|
+ const { type, value } = item.fill
|
|
|
+
|
|
|
+ var divStyle = ''
|
|
|
+ if (type === 'image') {
|
|
|
+ divStyle = `background-image: url(${value.picBase6});`
|
|
|
+ }
|
|
|
+ else if (type === 'gradient') {
|
|
|
+ divStyle = `background-image: radial-gradient(${value.rot}, ${value.colors[0].color}, ${value.colors[value.colors.length - 1].color});`
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ divStyle = `background-color:${value}`
|
|
|
+ }
|
|
|
+ var div = `<div id='page${index+1}' style='width:${width}px;height:${height}px;position:relative; ${divStyle}'>`
|
|
|
+ const elements = item.elements
|
|
|
+ for(let el in elements){
|
|
|
+ var style = 'position:absolute;'
|
|
|
+ var content=el.content
|
|
|
+ var tag = ''
|
|
|
+ var obj = {}
|
|
|
+ if (el.type === 'text') {
|
|
|
+ obj = {
|
|
|
+ width: el.width,
|
|
|
+ height: el.height,
|
|
|
+ left: el.left,
|
|
|
+ top: el.top,
|
|
|
+ 'transform': rotate(el.rotate),
|
|
|
+ // defaultFontName: theme.value.fontName,
|
|
|
+ // defaultColor: theme.value.fontColor,
|
|
|
+ // content: el.content,
|
|
|
+ 'line-height': 1,
|
|
|
+ // outline: {
|
|
|
+ // color: el.borderColor,
|
|
|
+ // width: el.borderWidth,
|
|
|
+ // style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
|
|
+ // },
|
|
|
+ border:`${el.borderWidth} ${(el.borderType === 'solid' ? 'solid' : 'dashed')} ${el.borderColor}`,
|
|
|
+ background: el.fillColor,
|
|
|
+ 'text-direction': el.isVertical,
|
|
|
+ 'writing-mode':el.isVertical,
|
|
|
+ 'box-shadow':el.shadow
|
|
|
+ }
|
|
|
+ tag = 'span'
|
|
|
+
|
|
|
+ }
|
|
|
+ else if (el.type === 'image') {
|
|
|
+ obj = {
|
|
|
+ src: el.src,
|
|
|
+ width: el.width,
|
|
|
+ height: el.height,
|
|
|
+ left: el.left,
|
|
|
+ top: el.top,
|
|
|
+ 'transform': rotate(el.rotate),
|
|
|
+ }
|
|
|
+ tag = 'image'
|
|
|
+ }
|
|
|
+ else if (el.type === 'audio') {
|
|
|
+ tag = 'video'
|
|
|
+ obj={
|
|
|
+ src: el.blob,
|
|
|
+ width: el.width,
|
|
|
+ height: el.height,
|
|
|
+ left: el.left,
|
|
|
+ top: el.top,
|
|
|
+ loop: false,
|
|
|
+ autoplay: false,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (el.type === 'video') {
|
|
|
+ tag = 'video'
|
|
|
+ obj={
|
|
|
+ src:(el.blob || el.src),
|
|
|
+ width: el.width,
|
|
|
+ height: el.height,
|
|
|
+ left: el.left,
|
|
|
+ top: el.top,
|
|
|
+ loop: false,
|
|
|
+ autoplay: false,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (el.type === 'shape') {
|
|
|
+ // if (el.shapType === 'line' || /Connector/.test(el.shapType)) {
|
|
|
+ // let start = [0, 0]
|
|
|
+ // let end = [0, 0]
|
|
|
+
|
|
|
+ // if (!el.isFlipV && !el.isFlipH) { // 右下
|
|
|
+ // start = [0, 0]
|
|
|
+ // end = [el.width, el.height]
|
|
|
+ // }
|
|
|
+ // else if (el.isFlipV && el.isFlipH) { // 左上
|
|
|
+ // start = [el.width, el.height]
|
|
|
+ // end = [0, 0]
|
|
|
+ // }
|
|
|
+ // else if (el.isFlipV && !el.isFlipH) { // 右上
|
|
|
+ // start = [0, el.height]
|
|
|
+ // end = [el.width, 0]
|
|
|
+ // }
|
|
|
+ // else { // 左下
|
|
|
+ // start = [el.width, 0]
|
|
|
+ // end = [0, el.height]
|
|
|
+ // }
|
|
|
+ // tag = 'hr'
|
|
|
+ // obj= {
|
|
|
+ // width: el.borderWidth || 1,
|
|
|
+ // left: el.left,
|
|
|
+ // top: el.top,
|
|
|
+ // start,
|
|
|
+ // end,
|
|
|
+ // style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
|
|
+ // color: el.borderColor,
|
|
|
+ // points: ['', el.shapType === 'straightConnector1' ? 'arrow' : '']
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // const shape = shapeList.find(item => item.pptxShapeType === el.shapType)
|
|
|
+
|
|
|
+ // const vAlignMap: { [key: string]: ShapeTextAlign } = {
|
|
|
+ // 'mid': 'middle',
|
|
|
+ // 'down': 'bottom',
|
|
|
+ // 'up': 'top',
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const element: PPTShapeElement = {
|
|
|
+ // type: 'shape',
|
|
|
+ // id: nanoid(10),
|
|
|
+ // width: el.width,
|
|
|
+ // height: el.height,
|
|
|
+ // left: el.left,
|
|
|
+ // top: el.top,
|
|
|
+ // viewBox: [200, 200],
|
|
|
+ // path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
|
|
|
+ // fill: el.fillColor || 'none',
|
|
|
+ // fixedRatio: false,
|
|
|
+ // rotate: el.rotate,
|
|
|
+ // outline: {
|
|
|
+ // color: el.borderColor,
|
|
|
+ // width: el.borderWidth,
|
|
|
+ // style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
|
|
+ // },
|
|
|
+ // text: {
|
|
|
+ // content: el.content,
|
|
|
+ // defaultFontName: theme.value.fontName,
|
|
|
+ // defaultColor: theme.value.fontColor,
|
|
|
+ // align: vAlignMap[el.vAlign] || 'middle',
|
|
|
+ // },
|
|
|
+ // flipH: el.isFlipH,
|
|
|
+ // flipV: el.isFlipV,
|
|
|
+ // }
|
|
|
+ // if (el.shadow) element.shadow = el.shadow
|
|
|
+
|
|
|
+ // if (shape) {
|
|
|
+ // element.path = shape.path
|
|
|
+ // element.viewBox = shape.viewBox
|
|
|
+
|
|
|
+ // if (shape.pathFormula) {
|
|
|
+ // element.pathFormula = shape.pathFormula
|
|
|
+ // element.viewBox = [el.width, el.height]
|
|
|
+
|
|
|
+ // const pathFormula = SHAPE_PATH_FORMULAS[shape.pathFormula]
|
|
|
+ // if ('editable' in pathFormula) {
|
|
|
+ // element.path = pathFormula.formula(el.width, el.height, pathFormula.defaultValue)
|
|
|
+ // element.keypoint = pathFormula.defaultValue
|
|
|
+ // }
|
|
|
+ // else element.path = pathFormula.formula(el.width, el.height)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // if (el.shapType === 'custom') {
|
|
|
+ // element.special = true
|
|
|
+ // element.path = el.path!
|
|
|
+ // element.viewBox = [originWidth, originHeight]
|
|
|
+ // }
|
|
|
+
|
|
|
+ // slide.elements.push(element)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ else if (el.type === 'table') {
|
|
|
+ const row = el.data.length
|
|
|
+ const col = el.data[0].length
|
|
|
+ tag = 'table'
|
|
|
+ const obj = {
|
|
|
+ fontname: theme.value.fontName,
|
|
|
+ color: theme.value.fontColor,
|
|
|
+ }
|
|
|
+ content=''
|
|
|
+ for (let i = 0; i < row; i++) {
|
|
|
+ content+='<tr>'
|
|
|
+ for (let j = 0; j < col; j++) {
|
|
|
+ const cellData = el.data[i][j]
|
|
|
+ content+='<td>'+ cellData.text + '</td>'
|
|
|
+
|
|
|
+ }
|
|
|
+ content+='</tr>'
|
|
|
+ }
|
|
|
+ obj={
|
|
|
+ width: el.width,
|
|
|
+ height: el.height,
|
|
|
+ left: el.left,
|
|
|
+ top: el.top,
|
|
|
+ border:`2px solid #eeece1`,
|
|
|
+ cellMinHeight: 36,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // else if (el.type === 'chart') {
|
|
|
+ // let labels: string[]
|
|
|
+ // let legends: string[]
|
|
|
+ // let series: number[][]
|
|
|
+
|
|
|
+ // if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') {
|
|
|
+ // const data = el.data
|
|
|
+ // labels = data[0].map(item => item + '')
|
|
|
+ // legends = ['系列1']
|
|
|
+ // series = [data[1]]
|
|
|
+ // }
|
|
|
+ // else {
|
|
|
+ // const data = el.data as ChartItem[]
|
|
|
+ // labels = Object.values(data[0].xlabels)
|
|
|
+ // legends = data.map(item => item.key)
|
|
|
+ // series = data.map(item => item.values.map(v => v.y))
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const options: ChartOptions = {}
|
|
|
+
|
|
|
+ // let chartType: ChartType = 'bar'
|
|
|
+
|
|
|
+ // switch (el.chartType) {
|
|
|
+ // case 'barChart':
|
|
|
+ // case 'bar3DChart':
|
|
|
+ // chartType = 'bar'
|
|
|
+ // if (el.barDir === 'bar') options.horizontalBars = true
|
|
|
+ // if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stackBars = true
|
|
|
+ // break
|
|
|
+ // case 'lineChart':
|
|
|
+ // case 'line3DChart':
|
|
|
+ // case 'areaChart':
|
|
|
+ // case 'area3DChart':
|
|
|
+ // case 'scatterChart':
|
|
|
+ // case 'bubbleChart':
|
|
|
+ // chartType = 'line'
|
|
|
+ // if (el.chartType === 'areaChart' || el.chartType === 'area3DChart') options.showArea = true
|
|
|
+ // if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') options.showLine = false
|
|
|
+ // break
|
|
|
+ // case 'pieChart':
|
|
|
+ // case 'pie3DChart':
|
|
|
+ // case 'doughnutChart':
|
|
|
+ // chartType = 'pie'
|
|
|
+ // if (el.chartType === 'doughnutChart') options.donut = true
|
|
|
+ // break
|
|
|
+ // default:
|
|
|
+ // }
|
|
|
+
|
|
|
+ // slide.elements.push({
|
|
|
+ // type: 'chart',
|
|
|
+ // id: nanoid(10),
|
|
|
+ // chartType: chartType,
|
|
|
+ // width: el.width,
|
|
|
+ // height: el.height,
|
|
|
+ // left: el.left,
|
|
|
+ // top: el.top,
|
|
|
+ // rotate: 0,
|
|
|
+ // themeColor: [theme.value.themeColor],
|
|
|
+ // gridColor: theme.value.fontColor,
|
|
|
+ // data: {
|
|
|
+ // labels,
|
|
|
+ // legends,
|
|
|
+ // series,
|
|
|
+ // },
|
|
|
+ // options,
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // else if (el.type === 'group' || el.type === 'diagram') {
|
|
|
+ // const elements = el.elements.map(_el => ({
|
|
|
+ // ..._el,
|
|
|
+ // left: _el.left + originLeft,
|
|
|
+ // top: _el.top + originTop,
|
|
|
+ // }))
|
|
|
+ // parseElements(elements)
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
