diff --git a/.gitignore b/.gitignore index c24208f..8dc3fe3 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,6 @@ /package-lock.json .DS_Store /.idea +dist.zip +dist +package-lock.yaml \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 9959a92..cc7e82d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -22,6 +22,5 @@ export default { -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; - } diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index b6165b0..d9e9489 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -474,7 +474,7 @@ export default { parseOfdDocument({ ofd: file, success(res) { - console.log(res) + console.log("返回内容",res) let t1 = new Date().getTime(); console.log('解析ofd',t1 - t); that.ofdObj = res[0]; diff --git a/src/utils/ofd/ofd.js b/src/utils/ofd/ofd.js index a337cdc..5347576 100644 --- a/src/utils/ofd/ofd.js +++ b/src/utils/ofd/ofd.js @@ -55,7 +55,6 @@ const doParseOFD = function (options) { } }) .catch(res => { - console.log(res) if (options.fail) { options.fail(res); } diff --git a/src/utils/ofd/ofd_parser.js b/src/utils/ofd/ofd_parser.js index ab1a66b..533fc76 100644 --- a/src/utils/ofd/ofd_parser.js +++ b/src/utils/ofd/ofd_parser.js @@ -130,7 +130,7 @@ const getAnnotations = async function (annoBase, annotations, doc, zip) { const pageId = anno['@_PageID']; let fileLoc = anno['ofd:FileLoc']; fileLoc = replaceFirstSlash(fileLoc); - if (annoBase && fileLoc.indexOf(annoBase) === -1) { + if (annoBase && fileLoc.indexOf(annoBase + "/") === -1) { fileLoc = `${annoBase}/${fileLoc}`; } if (fileLoc.indexOf(doc) === -1) { diff --git a/src/utils/ofd/ofd_render.js b/src/utils/ofd/ofd_render.js index 9a434fe..e249991 100644 --- a/src/utils/ofd/ofd_render.js +++ b/src/utils/ofd/ofd_render.js @@ -79,6 +79,7 @@ export const calPageBox = function (screenWidth, document, page) { let array = box.split(' '); const scale = ((screenWidth - 10) / parseFloat(array[2])).toFixed(1); setMaxPageScal(scale); + //设置初始页面展示内容比例大小 setPageScal(scale); box = parseStBox( box); box = converterBox(box) @@ -138,6 +139,7 @@ const renderLayerFromTemplate = function (tpls, template, pageDiv, fontResObj, d } export const renderPage = function (pageDiv, page, tpls, fontResObj, drawParamResObj, multiMediaResObj) { + console.log("Render Page", page); const pageId = Object.keys(page)[0]; const template = page[pageId]['json']['ofd:Template']; if (Array.isArray(template)) { // 当使用多个模板时 @@ -216,7 +218,7 @@ const renderSealPage = function (pageDiv, pages, tpls, isStampAnnot, stampAnnot, const layers = tpls[template['@_TemplateID']]['json']['ofd:Content']['ofd:Layer']; let array = []; array = array.concat(layers); - for (let layer of array) { + for (let layer of array) { if (layer) { renderLayer(div, fontResObj, drawParamResObj, multiMediaResObj, layer, isStampAnnot); } @@ -225,6 +227,7 @@ const renderSealPage = function (pageDiv, pages, tpls, isStampAnnot, stampAnnot, const contentLayers = page[pageId]['json']['ofd:Content']['ofd:Layer']; let array = []; array = array.concat(contentLayers); + console.log("开始渲染层====================", array); for (let contentLayer of array) { if (contentLayer) { renderLayer(div, fontResObj, drawParamResObj, multiMediaResObj, contentLayer, isStampAnnot); @@ -235,6 +238,7 @@ const renderSealPage = function (pageDiv, pages, tpls, isStampAnnot, stampAnnot, } const renderLayer = function (pageDiv, fontResObj, drawParamResObj, multiMediaResObj, layer, isStampAnnot) { + console.log("layer=========================", layer); let fillColor = null; let strokeColor = null; let lineWith = converterDpi(0.353); @@ -283,6 +287,7 @@ const renderLayer = function (pageDiv, fontResObj, drawParamResObj, multiMediaRe const textObjects = layer?.['ofd:TextObject']; let textObjectArray = []; textObjectArray = textObjectArray.concat(textObjects); + console.log("textObjectArray", textObjectArray); for (const textObject of textObjectArray) { if (textObject) { let svg = renderTextObject(fontResObj, textObject, fillColor, strokeColor); @@ -361,6 +366,7 @@ export const renderTextObject = function (fontResObj, textObject, defaultFillCol const size = converterDpi(parseFloat(textObject['@_Size'])); let array = []; array = array.concat(textObject['ofd:TextCode']); + console.log("开始渲染ofd:TextCode", array); const textCodePointList = calTextPoint(array); let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('version', '1.1'); diff --git a/src/utils/ofd/ofd_util.js b/src/utils/ofd/ofd_util.js index 90c704e..49724d6 100644 --- a/src/utils/ofd/ofd_util.js +++ b/src/utils/ofd/ofd_util.js @@ -18,333 +18,351 @@ * */ - -export const convertPathAbbreviatedDatatoPoint = abbreviatedData => { - let array = abbreviatedData.split(' '); - let pointList = []; - let i = 0; - while (i < array.length) { - if (array[i] === 'M' || array[i] === 'S') { - let point = { - 'type': 'M', - 'x': parseFloat(array[i + 1]), - 'y': parseFloat(array[i + 2]) - } - i = i + 3; - pointList.push(point); - } - if (array[i] === 'L') { - let point = { - 'type': 'L', - 'x': parseFloat(array[i + 1]), - 'y': parseFloat(array[i + 2]) - } - i = i + 3; - pointList.push(point); - } else if (array[i] === 'C') { - let point = { - 'type': 'C', - 'x': 0, - 'y': 0 - } - pointList.push(point) - i++; - } else if (array[i] === 'B') { - let point = { - 'type': 'B', - 'x1': parseFloat(array[i + 1]), - 'y1': parseFloat(array[i + 2]), - 'x2': parseFloat(array[i + 3]), - 'y2': parseFloat(array[i + 4]), - 'x3': parseFloat(array[i + 5]), - 'y3': parseFloat(array[i + 6]) - } - i = i + 7; - pointList.push(point); - } else { - i++; - } +export const convertPathAbbreviatedDatatoPoint = (abbreviatedData) => { + let array = abbreviatedData.split(" "); + let pointList = []; + let i = 0; + while (i < array.length) { + if (array[i] === "M" || array[i] === "S") { + let point = { + type: "M", + x: parseFloat(array[i + 1]), + y: parseFloat(array[i + 2]), + }; + i = i + 3; + pointList.push(point); } - return pointList; -} + if (array[i] === "L") { + let point = { + type: "L", + x: parseFloat(array[i + 1]), + y: parseFloat(array[i + 2]), + }; + i = i + 3; + pointList.push(point); + } else if (array[i] === "C") { + let point = { + type: "C", + x: 0, + y: 0, + }; + pointList.push(point); + i++; + } else if (array[i] === "B") { + let point = { + type: "B", + x1: parseFloat(array[i + 1]), + y1: parseFloat(array[i + 2]), + x2: parseFloat(array[i + 3]), + y2: parseFloat(array[i + 4]), + x3: parseFloat(array[i + 5]), + y3: parseFloat(array[i + 6]), + }; + i = i + 7; + pointList.push(point); + } else { + i++; + } + } + return pointList; +}; export const calPathPoint = function (abbreviatedPoint) { - let pointList = []; + let pointList = []; - for (let i = 0; i < abbreviatedPoint.length; i++) { - let point = abbreviatedPoint[i]; - if (point.type === 'M' || point.type === 'L' || point.type === 'C') { - let x = 0, y = 0; - x = point.x; - y = point.y; - point.x = converterDpi(x); - point.y = converterDpi(y); - pointList.push(point); - } else if (point.type === 'B') { - let x1 = point.x1, y1 = point.y1; - let x2 = point.x2, y2 = point.y2; - let x3 = point.x3, y3 = point.y3; - let realPoint = { - 'type': 'B', 'x1': converterDpi(x1), 'y1': converterDpi(y1), - 'x2': converterDpi(x2), 'y2': converterDpi(y2), - 'x3': converterDpi(x3), 'y3': converterDpi(y3) - } - pointList.push(realPoint); - } + for (let i = 0; i < abbreviatedPoint.length; i++) { + let point = abbreviatedPoint[i]; + if (point.type === "M" || point.type === "L" || point.type === "C") { + let x = 0, + y = 0; + x = point.x; + y = point.y; + point.x = converterDpi(x); + point.y = converterDpi(y); + pointList.push(point); + } else if (point.type === "B") { + let x1 = point.x1, + y1 = point.y1; + let x2 = point.x2, + y2 = point.y2; + let x3 = point.x3, + y3 = point.y3; + let realPoint = { + type: "B", + x1: converterDpi(x1), + y1: converterDpi(y1), + x2: converterDpi(x2), + y2: converterDpi(y2), + x3: converterDpi(x3), + y3: converterDpi(y3), + }; + pointList.push(realPoint); } - return pointList; -} + } + return pointList; +}; const millimetersToPixel = function (mm, dpi) { - //毫米转像素：mm * dpi / 25.4 - return ((mm * dpi / 25.4)); -} + //毫米转像素：mm * dpi / 25.4 + return (mm * dpi) / 25.4; +}; let MaxScale = 10; let Scale = MaxScale; export const setMaxPageScal = function (scale) { - MaxScale = scale > 5 ? 5 : scale; -} + MaxScale = scale > 5 ? 5 : scale; +}; export const setPageScal = function (scale) { - // scale = Math.ceil(scale); - Scale = scale > 1 ? scale : 1; - Scale = Scale > MaxScale ? MaxScale : Scale; -} + // scale = Math.ceil(scale); + Scale = scale > 1 ? scale : 1; + Scale = Scale > MaxScale ? MaxScale : Scale; +}; export const getPageScal = function () { - return Scale; -} + return Scale; +}; export const converterDpi = function (width) { - return millimetersToPixel(width, Scale * 25.4); -} + return millimetersToPixel(width, Scale * 25.4); +}; export const deltaFormatter = function (delta) { - if (delta.indexOf("g") === -1) { - let floatList = []; - for (let f of delta.split(' ')) { - floatList.push(parseFloat(f)); + if (delta.indexOf("g") === -1) { + let floatList = []; + for (let f of delta.split(" ")) { + floatList.push(parseFloat(f)); + } + return floatList; + } else { + const array = delta.split(" "); + let gFlag = false; + let gProcessing = false; + let gItemCount = 0; + let floatList = []; + for (const s of array) { + if ("g" === s) { + gFlag = true; + } else { + if (!s || s.trim().length == 0) { + continue; } - return floatList; - } else { - const array = delta.split(' '); - let gFlag = false; - let gProcessing = false; - let gItemCount = 0; - let floatList = []; - for (const s of array) { - if ('g' === s) { - gFlag = true; - } else { - if (!s || s.trim().length == 0) { - continue; - } - if (gFlag) { - gItemCount = parseInt(s); - gProcessing = true; - gFlag = false; - } else if (gProcessing) { - for (let j = 0; j < gItemCount; j++) { - floatList.push(parseFloat(s)); - } - gProcessing = false; - } else { - floatList.push(parseFloat(s)); - } - } + if (gFlag) { + gItemCount = parseInt(s); + gProcessing = true; + gFlag = false; + } else if (gProcessing) { + for (let j = 0; j < gItemCount; j++) { + floatList.push(parseFloat(s)); + } + gProcessing = false; + } else { + floatList.push(parseFloat(s)); } - return floatList; + } } -} + return floatList; + } +}; export const calTextPoint = function (textCodes) { - let x = 0; - let y = 0; - let textCodePointList = []; - if (!textCodes) { - return textCodePointList; + let x = 0; + let y = 0; + let textCodePointList = []; + if (!textCodes) { + return textCodePointList; + } + for (let textCode of textCodes) { + if (!textCode) { + continue; } - for (let textCode of textCodes) { - if (!textCode) { - continue - } - x = parseFloat(textCode['@_X']); - y = parseFloat(textCode['@_Y']); + x = parseFloat(textCode["@_X"]); + y = parseFloat(textCode["@_Y"]); - if (isNaN(x)) { - x = 0; - } - if (isNaN(y)) { - y = 0; - } + if (isNaN(x)) { + x = 0; + } + if (isNaN(y)) { + y = 0; + } - let deltaXList = []; - let deltaYList = []; - if (textCode['@_DeltaX'] && textCode['@_DeltaX'].length > 0) { - deltaXList = deltaFormatter(textCode['@_DeltaX']); + let deltaXList = []; + let deltaYList = []; + if (textCode["@_DeltaX"] && textCode["@_DeltaX"].length > 0) { + deltaXList = deltaFormatter(textCode["@_DeltaX"]); + } + if (textCode["@_DeltaY"] && textCode["@_DeltaY"].length > 0) { + deltaYList = deltaFormatter(textCode["@_DeltaY"]); + } + let textStr = textCode["#text"]; + if (textStr) { + textStr += ""; + textStr = decodeHtml(textStr); + textStr = textStr.replace(/ /g, " "); + for (let i = 0; i < textStr.length; i++) { + if (i > 0 && deltaXList.length > 0) { + x += deltaXList[i - 1]; } - if (textCode['@_DeltaY'] && textCode['@_DeltaY'].length > 0) { - deltaYList = deltaFormatter(textCode['@_DeltaY']); + if (i > 0 && deltaYList.length > 0) { + y += deltaYList[i - 1]; } - let textStr = textCode['#text']; - if (textStr) { - textStr += ''; - textStr = decodeHtml(textStr); - textStr = textStr.replace(/ /g, ' '); - for (let i = 0; i < textStr.length; i++) { - if (i > 0 && deltaXList.length > 0) { - x += deltaXList[(i - 1)]; - } - if (i > 0 && deltaYList.length > 0) { - y += deltaYList[(i - 1)]; - } - let text = textStr.substring(i, i + 1); - let filterPointY = textCodePointList.filter((textCodePoint) => { - return textCodePoint.y == converterDpi(y) - }); - if (filterPointY && filterPointY.length) { // Y坐标相同，无需再创建text标签 - filterPointY[0].text += text; - } else { - let textCodePoint = { 'x': converterDpi(x), 'y': converterDpi(y), 'text': text }; - textCodePointList.push(textCodePoint); - } - } + let text = textStr.substring(i, i + 1); + let filterPointY = textCodePointList.filter((textCodePoint) => { + return textCodePoint.y == converterDpi(y); + }); + if (filterPointY && filterPointY.length) { + // Y坐标相同，无需再创建text标签 + filterPointY[0].text += text; + } else { + let textCodePoint = { + x: converterDpi(x), + y: converterDpi(y), + text: text, + }; + textCodePointList.push(textCodePoint); } + } } - return textCodePointList; -} + } + return textCodePointList; +}; export const replaceFirstSlash = function (str) { - if (str) { - if (str.indexOf('/') === 0) { - str = str.replace('/', ''); - } + if (str) { + if (str.indexOf("/") === 0) { + str = str.replace("/", ""); } - return str; -} + } + return str; +}; export const getExtensionByPath = function (path) { - if (!path && typeof path !== "string") return ""; - return path.substring(path.lastIndexOf('.') + 1); -} - + if (!path && typeof path !== "string") return ""; + return path.substring(path.lastIndexOf(".") + 1); +}; let REGX_HTML_DECODE = /&\w+;|&#(\d+);/g; let HTML_DECODE = { - "<": "<", - ">": ">", - "&": "&", - " ": " ", - """: "\"", - "©": "", - "'": "'", - // Add more + "<": "<", + ">": ">", + "&": "&", + " ": " ", + """: '"', + "©": "", + "'": "'", + // Add more }; export const decodeHtml = function (s) { - s = (s != undefined) ? s : this.toString(); - return (typeof s != "string") ? s : - s.replace(REGX_HTML_DECODE, - function ($0, $1) { - var c = HTML_DECODE[$0]; - if (c == undefined) { - // Maybe is Entity Number - if (!isNaN($1)) { - c = String.fromCharCode(($1 == 160) ? 32 : $1); - } else { - c = $0; - } - } - return c; - }); + s = s != undefined ? s : this.toString(); + return typeof s != "string" + ? s + : s.replace(REGX_HTML_DECODE, function ($0, $1) { + var c = HTML_DECODE[$0]; + if (c == undefined) { + // Maybe is Entity Number + if (!isNaN($1)) { + c = String.fromCharCode($1 == 160 ? 32 : $1); + } else { + c = $0; + } + } + return c; + }); }; let FONT_FAMILY = { - '楷体': '楷体, KaiTi, Kai, simkai', - 'kaiti': '楷体, KaiTi, Kai, simkai', - 'Kai': '楷体, KaiTi, Kai', - 'simsun': 'SimSun, simsun, Songti SC', - '宋体': 'SimSun, simsun, Songti SC', - '黑体': 'SimHei, STHeiti, simhei', - '仿宋': 'FangSong, STFangsong, simfang', - '小标宋体': 'sSun', - '方正小标宋_gbk': 'sSun', - '仿宋_gb2312': 'FangSong, STFangsong, simfang', - '楷体_gb2312': '楷体, KaiTi, Kai, simkai', - 'couriernew': 'Courier New', - 'courier new': 'Courier New', + 楷体: "楷体, KaiTi, Kai, simkai", + kaiti: "楷体, KaiTi, Kai, simkai", + Kai: "楷体, KaiTi, Kai", + simsun: "SimSun, simsun, Songti SC", + 宋体: "SimSun, simsun, Songti SC", + 黑体: "SimHei, STHeiti, simhei", + 仿宋: "FangSong, STFangsong, simfang", + 小标宋体: "sSun", + 方正小标宋_gbk: "sSun", + 仿宋_gb2312: "FangSong, STFangsong, simfang", + 楷体_gb2312: "楷体, KaiTi, Kai, simkai", + couriernew: "Courier New", + "courier new": "Courier New", }; export const getFontFamily = function (font) { - if (FONT_FAMILY[font.toLowerCase()]) { - font = FONT_FAMILY[font.toLowerCase()]; - } - for (let key of Object.keys(FONT_FAMILY)) { - if (font.toLowerCase().indexOf(key.toLowerCase()) != -1) { - return FONT_FAMILY[key] - } + if (!font) { + return FONT_FAMILY["宋体"]; + } + if (FONT_FAMILY[font.toLowerCase()]) { + font = FONT_FAMILY[font.toLowerCase()]; + } + for (let key of Object.keys(FONT_FAMILY)) { + if (font.toLowerCase().indexOf(key.toLowerCase()) != -1) { + return FONT_FAMILY[key]; } - return font; -} + } + return font; +}; export const parseStBox = function (obj) { - if (obj) { - let array = obj.split(' '); - return { - x: (parseFloat(array[0])), y: (parseFloat(array[1])), - w: (parseFloat(array[2])), h: (parseFloat(array[3])) - }; - } else { - return null; - } -} + if (obj) { + let array = obj.split(" "); + return { + x: parseFloat(array[0]), + y: parseFloat(array[1]), + w: parseFloat(array[2]), + h: parseFloat(array[3]), + }; + } else { + return null; + } +}; export const parseCtm = function (ctm) { - let array = ctm.split(' '); - return array; -} + let array = ctm.split(" "); + return array; +}; export const parseColor = function (color) { - if (color) { - if (color.indexOf('#') !== -1) { - color = color.replace(/#/g, ''); - color = color.replace(/ /g, ''); - color = '#' + color.toString(); - return color; - } - let array = color.split(' '); - return `rgb(${array[0]}, ${array[1]}, ${array[2]})` - } else { - return `rgb(0, 0, 0)` + if (color) { + if (color.indexOf("#") !== -1) { + color = color.replace(/#/g, ""); + color = color.replace(/ /g, ""); + color = "#" + color.toString(); + return color; } -} + let array = color.split(" "); + return `rgb(${array[0]}, ${array[1]}, ${array[2]})`; + } else { + return `rgb(0, 0, 0)`; + } +}; export const converterBox = function (box) { - return { - x: converterDpi(box.x), y: converterDpi(box.y), - w: converterDpi(box.w), h: converterDpi(box.h) - }; -} + return { + x: converterDpi(box.x), + y: converterDpi(box.y), + w: converterDpi(box.w), + h: converterDpi(box.h), + }; +}; export const Uint8ArrayToHexString = function (arr) { - let words = []; - let j = 0; - for (let i = 0; i < arr.length * 2; i += 2) { - words[i >>> 3] |= parseInt(arr[j], 10) << (24 - (i % 8) * 4); - j++; - } + let words = []; + let j = 0; + for (let i = 0; i < arr.length * 2; i += 2) { + words[i >>> 3] |= parseInt(arr[j], 10) << (24 - (i % 8) * 4); + j++; + } - // 转换到16进制 - let hexChars = []; - for (let i = 0; i < arr.length; i++) { - let bite = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff; - hexChars.push((bite >>> 4).toString(16)); - hexChars.push((bite & 0x0f).toString(16)); - } + // 转换到16进制 + let hexChars = []; + for (let i = 0; i < arr.length; i++) { + let bite = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff; + hexChars.push((bite >>> 4).toString(16)); + hexChars.push((bite & 0x0f).toString(16)); + } - return hexChars.join(''); -} + return hexChars.join(""); +};