@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.9 → 1.0.4-alpha.1

package/lib/tools/exportPDF.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 将HTML内容转换为PDF文档流
+ * @param htmlElement HTML元素
+ * @param options 配置选项
+ * @returns PDF文档的Blob对象
+ */
+export declare const html2pdf: (htmlElement: HTMLElement, options?: {
+    filename?: string;
+    margin?: number;
+    image?: {
+        type?: 'jpeg' | 'png';
+        quality?: number;
+    };
+    jsPDF?: {
+        orientation?: 'portrait' | 'landscape';
+        unit?: 'pt' | 'mm' | 'cm' | 'in';
+        format?: 'a4' | 'a3' | 'a5' | 'a0';
+    };
+}, onProgress?: ((progress: number, title: string) => void) | undefined) => Promise<Blob>;
+/**
+ * 将HTML元素转换为PDF文档流并下载
+ * @param dom HTML元素
+ * @param pageWidth 页面宽度
+ * @param fileName 文件名
+ * @returns 下载的PDF文件
+ */
+export declare const domloadPdf: (dom: HTMLElement, pageWidth: 'a4' | 'a3' | 'a5' | 'a0', fileName?: string, onProgress?: ((progress: number, title: string) => void) | undefined) => Promise<void>;

package/lib/tools/exportPDF.js

@@ -0,0 +1,95 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tools/exportPDF.ts
+var exportPDF_exports = {};
+__export(exportPDF_exports, {
+  domloadPdf: () => domloadPdf,
+  html2pdf: () => html2pdf
+});
+module.exports = __toCommonJS(exportPDF_exports);
+var html2pdf = async (htmlElement, options = {}, onProgress) => {
+  var _a, _b, _c, _d, _e;
+  const { jsPDF: JS_PDF } = await import(
+    /* webpackChunkName: "jspdf" */
+    "jspdf"
+  );
+  const pdf = new JS_PDF({
+    orientation: ((_a = options.jsPDF) == null ? void 0 : _a.orientation) || "portrait",
+    unit: ((_b = options.jsPDF) == null ? void 0 : _b.unit) || "pt",
+    format: ((_c = options.jsPDF) == null ? void 0 : _c.format) || "a4"
+  });
+  const { default: html2canvas } = await import("html2canvas");
+  onProgress == null ? void 0 : onProgress(20, "渲染页面内容...");
+  const canvas = await html2canvas(htmlElement, {
+    scale: 2,
+    // 提高清晰度
+    useCORS: true,
+    // 允许跨域图片
+    logging: false
+  });
+  const imageType = ((_d = options.image) == null ? void 0 : _d.type) || "jpeg";
+  const imageQuality = ((_e = options.image) == null ? void 0 : _e.quality) || 1;
+  const imgData = canvas.toDataURL(`image/${imageType}`, imageQuality);
+  const margin = options.margin || 20;
+  const pdfWidth = pdf.internal.pageSize.getWidth();
+  const pdfHeight = pdf.internal.pageSize.getHeight();
+  const imgWidth = pdfWidth - margin * 2;
+  const imgHeight = canvas.height * imgWidth / canvas.width;
+  let heightLeft = imgHeight;
+  let position = margin;
+  const pageHeight = pdfHeight - margin * 2;
+  pdf.addImage(imgData, imageType.toUpperCase(), margin, position, imgWidth, imgHeight);
+  heightLeft -= pageHeight;
+  while (heightLeft >= 0) {
+    position = heightLeft - imgHeight;
+    pdf.addPage();
+    pdf.addImage(imgData, imageType.toUpperCase(), margin, position, imgWidth, imgHeight);
+    heightLeft -= pageHeight;
+  }
+  onProgress == null ? void 0 : onProgress(50, "转换HTML内容...");
+  return pdf.output("blob");
+};
+var domloadPdf = async (dom, pageWidth, fileName = "未命名", onProgress) => {
+  const { saveAs } = await import("file-saver");
+  onProgress == null ? void 0 : onProgress(5, "初始化...");
+  const blob = await html2pdf(dom, {
+    jsPDF: {
+      orientation: "portrait",
+      unit: "pt",
+      format: pageWidth
+    }
+  }, onProgress);
+  onProgress == null ? void 0 : onProgress(80, "生成PDF...");
+  return saveAs(blob, `${fileName}.pdf`);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  domloadPdf,
+  html2pdf
+});

package/lib/tools/generateStylesFromSettings.d.ts

@@ -0,0 +1,38 @@
+interface HeadingStyle extends TextStyle {
+    marginTop: string;
+    marginBottom: string;
+}
+export interface TextStyle {
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    lineHeight: string;
+    color: string;
+}
+interface ListStyle extends TextStyle {
+    paddingLeft: string;
+    marginTop: string;
+    marginBottom: string;
+}
+export interface FormatSettings {
+    headings: {
+        h1: HeadingStyle;
+        h2: HeadingStyle;
+        h3: HeadingStyle;
+        h4: HeadingStyle;
+        h5: HeadingStyle;
+        h6: HeadingStyle;
+    };
+    paragraph: TextStyle;
+    lists: {
+        ul: ListStyle;
+        ol: ListStyle;
+    };
+}
+/**
+ * 生成CSS样式内容
+ * @param settings 格式设置
+ * @returns CSS样式字符串
+ */
+export declare const generateStylesFromSettings: (settings: FormatSettings) => string;
+export {};

package/lib/tools/generateStylesFromSettings.js

@@ -0,0 +1,77 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tools/generateStylesFromSettings.ts
+var generateStylesFromSettings_exports = {};
+__export(generateStylesFromSettings_exports, {
+  generateStylesFromSettings: () => generateStylesFromSettings
+});
+module.exports = __toCommonJS(generateStylesFromSettings_exports);
+var generateStylesFromSettings = (settings) => {
+  let css = "";
+  Object.entries(settings.headings).forEach(([heading, style]) => {
+    css += `
+${heading} {
+  font-family: ${style.fontFamily};
+  font-size: ${style.fontSize};
+  font-weight: ${style.fontWeight};
+  line-height: ${style.lineHeight};
+  color: ${style.color};
+  margin-top: ${style.marginTop};
+  margin-bottom: ${style.marginBottom};
+}
+`;
+  });
+  css += `
+p {
+  font-family: ${settings.paragraph.fontFamily};
+  font-size: ${settings.paragraph.fontSize};
+  font-weight: ${settings.paragraph.fontWeight};
+  line-height: ${settings.paragraph.lineHeight};
+  color: ${settings.paragraph.color};
+}
+`;
+  css += `
+ul {
+  font-family: ${settings.lists.ul.fontFamily};
+  font-size: ${settings.lists.ul.fontSize};
+  font-weight: ${settings.lists.ul.fontWeight};
+  line-height: ${settings.lists.ul.lineHeight};
+  color: ${settings.lists.ul.color};
+  padding-left: ${settings.lists.ul.paddingLeft};
+  margin-top: ${settings.lists.ul.marginTop};
+  margin-bottom: ${settings.lists.ul.marginBottom};
+}
+
+ol {
+  font-family: ${settings.lists.ol.fontFamily};
+  font-size: ${settings.lists.ol.fontSize};
+  font-weight: ${settings.lists.ol.fontWeight};
+  line-height: ${settings.lists.ol.lineHeight};
+  color: ${settings.lists.ol.color};
+  padding-left: ${settings.lists.ol.paddingLeft};
+  margin-top: ${settings.lists.ol.marginTop};
+  margin-bottom: ${settings.lists.ol.marginBottom};
+}
+`;
+  return css;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateStylesFromSettings
+});

package/lib/type.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormatSettings } from './tools/generateStylesFromSettings';
 interface IUeditorStype extends React.CSSProperties {
     toolbarColor?: string;
 }
@@ -68,6 +69,10 @@ export interface ILcdpUeditorProps {
          */
         videoAllowFiles?: string[];
         maximumWords?: number;
+        /**
+         * 导出文件名
+         */
+        exportFileName?: string;
     };
     toolbars?: string[][];
     /**
@@ -100,6 +105,22 @@ export interface ILcdpUeditorProps {
      * @param val 编辑器内容
      */
     onChange?(val: string): void;
+    /**
+     * 样式前缀
+     */
+    prefixCls?: string;
+    /**
+     * 格式设置变化
+     */
+    onFormatChange?(val: FormatSettings): void;
+    /**
+     * 默认格式设置
+     */
+    defaultFormatSetting?: FormatSettings;
+    /**
+     * 底部功能类型
+     */
+    bottomTypes?: Array<'chineseCount' | 'charCount' | 'pageWidth' | 'formatSetting' | 'exportPdf' | 'fullScreen' | 'copy'>;
 }
 export interface ILcdpUeditorInst {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/lcdp-ueditor-react",
-  "version": "1.0.3-alpha.9",
+  "version": "1.0.4-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,14 +18,19 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.180",
-    "father": "^4.1.9"
+    "father": "^4.1.9",
+    "@types/file-saver": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^16.12.0 || ^17.0.0",
     "lodash": "^4.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.2"
+    "@babel/runtime": "7.23.2",
+    "jspdf": "^2.5.1",
+    "file-saver": "^2.0.5",
+    "antd": "4.24.13",
+    "html2canvas": "^1.4.1"
   },
   "publishConfig": {
     "access": "public",