cloud-web-corejs 1.0.54-dev.807 → 1.0.54-dev.809

package/src/components/xform/utils/textMaskUtil.js

@@ -124,8 +124,10 @@ export function resolveTextMaskFlag(widgetOptions, ctx) {
  *
  * @param {Object} $grid vxe-grid 实例。
  * @param {Object} ctx 判定上下文，由 buildTextMaskContext 生成。
+ * @param {Array} [exportItemColumns] 本次明细导出实际使用的列（导出按钮上单独维护时由调用方
+ *   传入）；不传则回落到表格属性上配的那套。
  */
-export function markMaskedExportColumns($grid, ctx) {
+export function markMaskedExportColumns($grid, ctx, exportItemColumns) {
   if (!$grid || typeof $grid.getTableColumn !== "function") return;
 
   /** 打标记。列本就被其它规则（isNonDataExportColumn）剔除时不接管，避免撤销时误删。 */
@@ -174,6 +176,7 @@ export function markMaskedExportColumns($grid, ctx) {
     }
   };
   let originOption = $grid.params?.originOption;
-  let exportItemColumns = originOption?.exportItemConfig?.columns || [];
-  exportItemColumns.forEach(markItemColumn);
+  let tableItemColumns = originOption?.exportItemConfig?.columns;
+  let itemColumns = exportItemColumns || tableItemColumns || [];
+  itemColumns.forEach(markItemColumn);
 }

package/src/index.js

@@ -28,7 +28,12 @@ Vue.component("BaseKeepAlive", BaseKeepAlive);
 import VXETable from "vxe-table";
 import "vxe-table/lib/style.css";
 
-// 引入扩展插件
+// 区域选取/复制粘贴：自研实现，通过 window.VXETableMixin 挂载，
+// 必须在下面的 Vue.use(VXETable) 之前求值（core 在 install 时读取一次并 delete）
+import "@base/components/table/plugins/cell-area/index.js";
+import "@base/components/table/plugins/cell-area/index.scss";
+
+// 引入扩展插件（官方付费插件，已由上面的自研 cell-area 替代，保留仅作回退参考）
 // import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.es6.min.js";
 // import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.min.css";
 

package/src/utils/pdfUtil.js

@@ -106,6 +106,132 @@ function pickScale(width, height, expected) {
   return Math.max(scale, 1);
 }
 
+//Safari(WebKit) 的 getComputedStyle 会把颜色序列化成 color(srgb …) / color(display-p3 …)，
+//而 html2canvas 1.4.1 只认 rgb/rgba/hsl/hsla 四种，撞上就抛
+//"Attempting to parse an unsupported color function" 直接整个导出失败。
+//项目源码里并没有写过 color()，是浏览器自己吐出来的，改样式没用——只能在克隆体上就地换算。
+const COLOR_FUNCTION = /color\([^()]*\)/g;
+
+//html2canvas 会按颜色解析的属性(format: 'color')，外加三个值里可能夹着颜色的：
+//渐变、阴影里的 color() 一样会把解析器打挂。
+const COLOR_PROPS = [
+  "color",
+  "background-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "text-decoration-color",
+  "-webkit-text-stroke-color",
+  "background-image",
+  "box-shadow",
+  "text-shadow",
+];
+
+//探针色：用来判断 canvas 到底认没认这个值(不认的话 fillStyle 会保持原样)
+const PROBE_COLOR = "#010203";
+
+function isWebKit() {
+  const ua = typeof navigator === "undefined" ? "" : navigator.userAgent || "";
+  //Chrome 系的 UA 里也有 AppleWebKit 字样，但它不会这么序列化，得排掉
+  return /AppleWebKit/.test(ua) && !/Chrome|Chromium|Edg\//.test(ua);
+}
+
+function probeContext() {
+  try {
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" ? canvas.getContext("2d") : null;
+  } catch (err) {
+    return null;
+  }
+}
+
+function toByte(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 0;
+  const ratio = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(255, Math.round(ratio * 255)));
+}
+
+function toAlpha(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 1;
+  const alpha = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(1, alpha));
+}
+
+//浏览器不肯换算时的兜底：按 sRGB 直接取分量。
+//display-p3 这样算是近似(色域没做映射)，但截图里看不出差别，总好过整个导出失败。
+function fallbackColor(value) {
+  const inside = value.slice(value.indexOf("(") + 1, value.lastIndexOf(")"));
+  const parts = inside.split("/");
+  //第一段是色彩空间名(srgb / display-p3 …)，分量从第二段开始
+  const numbers = parts[0].trim().split(/\s+/).slice(1);
+  const channels = [0, 1, 2].map((i) => toByte(numbers[i] || "0"));
+  const alpha = parts.length > 1 ? toAlpha(parts[1]) : 1;
+  return "rgba(" + channels.join(", ") + ", " + alpha + ")";
+}
+
+function toLegacyColor(value, ctx) {
+  return value.replace(COLOR_FUNCTION, (match) => {
+    //优先让浏览器自己换：它认识 color()，换出来的 sRGB 值是准的
+    if (ctx) {
+      ctx.fillStyle = PROBE_COLOR;
+      ctx.fillStyle = match;
+      const converted = ctx.fillStyle;
+      const usable = typeof converted === "string" && converted.indexOf("color(") === -1;
+      if (usable && converted !== PROBE_COLOR) return converted;
+    }
+    return fallbackColor(match);
+  });
+}
+
+//在 html2canvas 的克隆体上把 color() 全部换成 rgba()，写成内联样式(优先级最高)。
+//只在需要时才挂上去：这一趟要给每个节点再算一次样式，白跑一遍就是白卡一下。
+export function normalizeColorFunctions(clonedDoc, clonedElement) {
+  const view = clonedDoc.defaultView;
+  if (!view || typeof view.getComputedStyle !== "function") return;
+  const ctx = probeContext();
+  const targets = [];
+  //除了目标元素，html2canvas 还会读 html/body 的背景色(parseBackgroundColor)，一起带上
+  if (clonedDoc.documentElement) targets.push(clonedDoc.documentElement);
+  if (clonedDoc.body) targets.push(clonedDoc.body);
+  targets.push(clonedElement);
+  const children = clonedElement.querySelectorAll("*");
+  for (let i = 0; i < children.length; i++) targets.push(children[i]);
+
+  for (let i = 0; i < targets.length; i++) {
+    const el = targets[i];
+    if (!el || !el.style) continue;
+    const style = view.getComputedStyle(el);
+    for (let j = 0; j < COLOR_PROPS.length; j++) {
+      const prop = COLOR_PROPS[j];
+      const value = style.getPropertyValue(prop);
+      if (!value || value.indexOf("color(") === -1) continue;
+      el.style.setProperty(prop, toLegacyColor(value, ctx));
+    }
+  }
+}
+
+function isUnsupportedColorError(err) {
+  const message = err && err.message ? err.message : String(err || "");
+  return message.indexOf("unsupported color function") !== -1;
+}
+
+function withColorFix(options) {
+  return Object.assign({}, options, { onclone: normalizeColorFunctions });
+}
+
+async function renderCanvas(dom, options, fixColors) {
+  try {
+    return await html2canvas(dom, fixColors ? withColorFix(options) : options);
+  } catch (err) {
+    //别的引擎哪天也开始这么序列化，兜一次；已经带着换算跑过就别再重来了
+    if (fixColors || !isUnsupportedColorError(err)) throw err;
+    return html2canvas(dom, withColorFix(options));
+  }
+}
+
 function buildIgnore(selectors) {
   let list = [LOADING_MASK];
   if (selectors) list = list.concat(selectors);
@@ -273,7 +399,7 @@ export async function exportPDF(option) {
     //只能靠文案说明进度，真要更快就得降 scale 或少截点内容。
     if (loading) loading.setText("正在渲染页面，请稍候…");
     await nextFrame();
-    const canvas = await html2canvas(dom, {
+    const options = {
       backgroundColor: "#ffffff",
       useCORS: true,
       logging: false,
@@ -285,7 +411,9 @@ export async function exportPDF(option) {
       windowWidth: Math.max(document.documentElement.clientWidth, fullWidth),
       windowHeight: fullHeight + 200,
       ignoreElements: buildIgnore(option.ignoreSelectors),
-    });
+    };
+    //WebKit 上直接带着颜色换算跑：先失败一次再重来，等于把那几秒的冻结再来一遍
+    const canvas = await renderCanvas(dom, options, isWebKit());
     await canvasToPdf(canvas, fileName, loading);
     return true;
   } catch (err) {