xh-htmlword 1.1.8 → 1.2.0

package/README.md

@@ -13,6 +13,8 @@ import handleExportWord from "xh-htmlword";
 ## 页面 dom 生成后调用
 
 ```js
+//在需要分页的地方添加 <span><br clear="all" style="page-break-before: always" /> </span> 即可分页
+
 // dom：需要渲染的html父盒子标签 ， 类型：string 例如 id/class
 //  fileName：文件名称 类型：string
 //  timeOut:设置导出图片加载 超时时间 默认值 5000  (5s)
@@ -25,8 +27,8 @@ handleExportWord({
   dom: ".export-box",
   fileName: "cs",
   timeOut: 3000,
-  callBack: () => {
-    console.log("导出成功");
+  callBack: (res) => {
+    console.log("导出成功"); //res 文档流
   },
   defultImg: "",
   className: "export-box",
@@ -195,6 +197,13 @@ handleExportWord({
         <el-step title="Step 3" />
       </el-steps>
     </div>
+
+     <span><br clear="all" style="page-break-before: always" /> </span>
+    分页
+
+    <span><br clear="all" style="page-break-before: always" /> </span>
+    分页
+
   </div>
 
   <button @click="handleExport">导出</button>

package/dist/xh.js

@@ -10257,28 +10257,32 @@ const $C = Array.isArray, AQ = (r, e, A) => new Promise((t, n) => {
 }) => {
   const s = document.querySelector(r), g = s.cloneNode(!0);
   if (o && o.length > 0 && $C(o)) {
-    const f = o.map((u) => {
-      const U = document.querySelector(u);
-      if (!U)
+    const f = [];
+    o.map((u) => {
+      const U = document.querySelectorAll(u);
+      if (U.length == 0)
         throw new Error(`dom不存在：“${u}” , 请检查传入的dom标签是否正确`);
-      return new Promise((p, v) => {
-        YC(U, {
-          scale: 1,
-          width: U.offsetWidth,
-          height: U.offsetHeight,
-          allowTaint: !0,
-          useCORS: !0
-        }).then((K) => {
-          const k = g.querySelector(u);
-          k.innerHTML = "";
-          const L = K.toDataURL("image/png", 1), F = new Image();
-          F.onload = () => {
-            URL.revokeObjectURL(L);
-          }, F.src = L, k.appendChild(F), p(K);
-        });
+      U.forEach((p, v) => {
+        f.push(
+          new Promise((K, k) => {
+            YC(p, {
+              scale: 1,
+              width: p.offsetWidth,
+              height: p.offsetHeight,
+              allowTaint: !0,
+              useCORS: !0
+            }).then((L) => {
+              const F = g.querySelectorAll(u)[v];
+              F.innerHTML = "";
+              const O = L.toDataURL("image/png", 1), D = new Image();
+              D.onload = () => {
+                URL.revokeObjectURL(O);
+              }, D.src = O, F.appendChild(D), K(L);
+            });
+          })
+        );
       });
-    });
-    await Promise.all(f);
+    }), await Promise.all(f);
   }
   const Q = s == null ? void 0 : s.getElementsByTagName("canvas"), c = g == null ? void 0 : g.getElementsByTagName("canvas"), h = Array.from(Q).map((f, u) => new Promise((U) => {
     const p = f.toDataURL("image/png", 1), v = new Image();
@@ -10303,7 +10307,7 @@ const $C = Array.isArray, AQ = (r, e, A) => new Promise((t, n) => {
   });
 };
 function eQ(r, e) {
-  return e && [...tQ(e)].forEach((A) => {
+  return r = r.replace(/break-before: page/g, "page-break-before: always"), e && [...tQ(e)].forEach((A) => {
     if (r.includes(fi(A.selectorText))) {
       let t = new RegExp(`class="${fi(A.selectorText)}"`, "g");
       r = r.replace(t, `style="${A.style.cssText}"`);

package/dist/xh.umd.cjs

@@ -98,10 +98,10 @@ Content-Location: `+((a=i.contentLocation)==null?"":a)+`
 * @vue/shared v3.4.23
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
-**/process.env.NODE_ENV!=="production"&&Object.freeze({}),process.env.NODE_ENV!=="production"&&Object.freeze([]);const $C=Array.isArray,AQ=(r,e,A)=>new Promise((t,n)=>{const i=new Image;i.crossOrigin="",i.src=r.src,i.onload=function(){const s=document.createElement("canvas");s.width=r.width,s.height=r.height;const g=s.getContext("2d");g==null||g.drawImage(i,0,0,r.width,r.height);const Q=i.src.substring(i.src.lastIndexOf(".")+1).toLowerCase(),c=s.toDataURL("image/"+Q,1);r.setAttribute("src",c),s.remove(),clearTimeout(a),t(c)},i.onerror=async()=>{clearTimeout(a),await o(),console.error("图片加载异常:",i.src),t("xh-htmlword: 图片加载异常")};const a=setTimeout(async()=>{await o(),console.error("图片加载超时:",i.src),t("xh-htmlword: 图片加载超时")},e),o=()=>new Promise(s=>{const g=new Image;g.crossOrigin="",g.src=A||ya,g.onload=()=>{const Q=document.createElement("canvas");Q.width=r.width,Q.height=r.height;const c=Q.getContext("2d");c==null||c.drawImage(g,0,0,r.width,r.height);const h=g.src.substring(g.src.lastIndexOf(".")+1).toLowerCase(),C=Q.toDataURL("image/"+h,1);r.setAttribute("src",C),Q.remove(),s()}})}),eQ=async({dom:r,fileName:e=nQ(),timeOut:A=5e3,callBack:t,options:n={},defultImg:i,className:a,drawCanvas:o})=>{const s=document.querySelector(r),g=s.cloneNode(!0);if(o&&o.length>0&&$C(o)){const f=o.map(u=>{const U=document.querySelector(u);if(!U)throw new Error(`dom不存在：“${u}” , 请检查传入的dom标签是否正确`);return new Promise((p,v)=>{YC(U,{scale:1,width:U.offsetWidth,height:U.offsetHeight,allowTaint:!0,useCORS:!0}).then(K=>{const k=g.querySelector(u);k.innerHTML="";const L=K.toDataURL("image/png",1),F=new Image;F.onload=()=>{URL.revokeObjectURL(L)},F.src=L,k.appendChild(F),p(K)})})});await Promise.all(f)}const Q=s==null?void 0:s.getElementsByTagName("canvas"),c=g==null?void 0:g.getElementsByTagName("canvas"),h=Array.from(Q).map((f,u)=>new Promise(U=>{const p=f.toDataURL("image/png",1),v=new Image;v.onload=()=>{URL.revokeObjectURL(p),U()},v.src=p,c[u].parentNode.insertBefore(v,c[u])})),C=g.getElementsByTagName("canvas");Array.from(C).forEach(f=>f.parentNode.removeChild(f)),Promise.all(h).then(async()=>{const f=[...g.getElementsByTagName("img")];let u=[];f.forEach(K=>{u.push(AQ(K,A,i))}),await Promise.all(u);const U=`
+**/process.env.NODE_ENV!=="production"&&Object.freeze({}),process.env.NODE_ENV!=="production"&&Object.freeze([]);const $C=Array.isArray,AQ=(r,e,A)=>new Promise((t,n)=>{const i=new Image;i.crossOrigin="",i.src=r.src,i.onload=function(){const s=document.createElement("canvas");s.width=r.width,s.height=r.height;const g=s.getContext("2d");g==null||g.drawImage(i,0,0,r.width,r.height);const Q=i.src.substring(i.src.lastIndexOf(".")+1).toLowerCase(),c=s.toDataURL("image/"+Q,1);r.setAttribute("src",c),s.remove(),clearTimeout(a),t(c)},i.onerror=async()=>{clearTimeout(a),await o(),console.error("图片加载异常:",i.src),t("xh-htmlword: 图片加载异常")};const a=setTimeout(async()=>{await o(),console.error("图片加载超时:",i.src),t("xh-htmlword: 图片加载超时")},e),o=()=>new Promise(s=>{const g=new Image;g.crossOrigin="",g.src=A||ya,g.onload=()=>{const Q=document.createElement("canvas");Q.width=r.width,Q.height=r.height;const c=Q.getContext("2d");c==null||c.drawImage(g,0,0,r.width,r.height);const h=g.src.substring(g.src.lastIndexOf(".")+1).toLowerCase(),C=Q.toDataURL("image/"+h,1);r.setAttribute("src",C),Q.remove(),s()}})}),eQ=async({dom:r,fileName:e=nQ(),timeOut:A=5e3,callBack:t,options:n={},defultImg:i,className:a,drawCanvas:o})=>{const s=document.querySelector(r),g=s.cloneNode(!0);if(o&&o.length>0&&$C(o)){const f=[];o.map(u=>{const U=document.querySelectorAll(u);if(U.length==0)throw new Error(`dom不存在：“${u}” , 请检查传入的dom标签是否正确`);U.forEach((p,v)=>{f.push(new Promise((K,k)=>{YC(p,{scale:1,width:p.offsetWidth,height:p.offsetHeight,allowTaint:!0,useCORS:!0}).then(L=>{const F=g.querySelectorAll(u)[v];F.innerHTML="";const O=L.toDataURL("image/png",1),D=new Image;D.onload=()=>{URL.revokeObjectURL(O)},D.src=O,F.appendChild(D),K(L)})}))})}),await Promise.all(f)}const Q=s==null?void 0:s.getElementsByTagName("canvas"),c=g==null?void 0:g.getElementsByTagName("canvas"),h=Array.from(Q).map((f,u)=>new Promise(U=>{const p=f.toDataURL("image/png",1),v=new Image;v.onload=()=>{URL.revokeObjectURL(p),U()},v.src=p,c[u].parentNode.insertBefore(v,c[u])})),C=g.getElementsByTagName("canvas");Array.from(C).forEach(f=>f.parentNode.removeChild(f)),Promise.all(h).then(async()=>{const f=[...g.getElementsByTagName("img")];let u=[];f.forEach(K=>{u.push(AQ(K,A,i))}),await Promise.all(u);const U=`
   <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head>
   </head>
   <body>
   ${g.outerHTML}
   </body>
-  </html>`,p=tQ(U,a),v=Ua.asBlob(p,n);va(v,`${e}.docx`),t&&t()})};function tQ(r,e){return e&&[...rQ(e)].forEach(A=>{if(r.includes(ha(A.selectorText))){let t=new RegExp(`class="${ha(A.selectorText)}"`,"g");r=r.replace(t,`style="${A.style.cssText}"`)}}),r}function ha(r){let e=r.match(/\.(\w+)/);if(e)return e[1];console.log("没有找到匹配的部分")}function rQ(r){return[...document.styleSheets].reverse().find(({cssRules:t})=>[...t].find(n=>n.selectorText.includes(r))).cssRules}const nQ=()=>{const r=new Date,e=r.getFullYear(),A=("0"+(r.getMonth()+1)).slice(-2),t=("0"+r.getDate()).slice(-2);return`${e}${A}${t}`};return eQ});
+  </html>`,p=tQ(U,a),v=Ua.asBlob(p,n);va(v,`${e}.docx`),t&&t()})};function tQ(r,e){return r=r.replace(/break-before: page/g,"page-break-before: always"),e&&[...rQ(e)].forEach(A=>{if(r.includes(ha(A.selectorText))){let t=new RegExp(`class="${ha(A.selectorText)}"`,"g");r=r.replace(t,`style="${A.style.cssText}"`)}}),r}function ha(r){let e=r.match(/\.(\w+)/);if(e)return e[1];console.log("没有找到匹配的部分")}function rQ(r){return[...document.styleSheets].reverse().find(({cssRules:t})=>[...t].find(n=>n.selectorText.includes(r))).cssRules}const nQ=()=>{const r=new Date,e=r.getFullYear(),A=("0"+(r.getMonth()+1)).slice(-2),t=("0"+r.getDate()).slice(-2);return`${e}${A}${t}`};return eQ});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xh-htmlword",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "type": "module",
   "description": "用于html页转word文档的工具",
   "files": [