yangg 9 місяців тому
батько
коміт
cb046737fd
2 змінених файлів з 57 додано та 36 видалено
  1. 1 1
      .env.development
  2. 56 35
      src/views/document/com/view.vue

+ 1 - 1
.env.development

@@ -2,5 +2,5 @@
 ENV = 'development'
 port = 8080
 # base api
-VUE_APP_BASE_API = 'http://58.246.234.210:8084'
+VUE_APP_BASE_API = 'http://192.168.1.178:8084'
 #192.168.1.178

+ 56 - 35
src/views/document/com/view.vue

@@ -518,16 +518,34 @@ export default {
 
       try {
         let contentClone = this.$refs.content.cloneNode(true);
-        console.log(contentClone); // 添加这行来检查克隆的内容
-
-        // 等待所有图片加载完成
-        await this.waitForImages(contentClone);
+        console.log("Original content:", contentClone.innerHTML);
+        const firstHeading = contentClone.querySelector(
+         "p"
+        );
+        if (firstHeading) {
+          const span = firstHeading.querySelector("span");
+          if (span) {
+            console.log( span.innerHTML);
+            span.innerHTML = span.innerHTML.replace(/       /, '');
+            console.log("1",span.innerHTML);
+          }
+        }
+        // 等待所有图片加载完成并转换为 Base64
+        const images = contentClone.querySelectorAll("img");
+        for (let img of images) {
+          await this.convertImageToBase64(img);
+          // 设置图片样式以确保它们显示正确
+          img.style.maxWidth = "100%";
+          img.style.height = "auto";
+          if (img.parentElement.tagName === "P") {
+            console.log(img);
+            img.parentElement.style.textAlign =
+              img === images[0] ? "left" : "right";
+            /* img.style.marginTop =img === images[0] ? '':"-80px"; */
+          }
+        }
 
-        // 将图片转换为 Base64
-        const imgPromises = Array.from(
-          contentClone.querySelectorAll("img")
-        ).map((img) => this.convertImageToBase64(img));
-        await Promise.all(imgPromises);
+        console.log("Content after image processing:", contentClone.innerHTML);
 
         // 处理输入框
         contentClone.querySelectorAll('input[type="text"]').forEach((input) => {
@@ -573,6 +591,8 @@ export default {
       </html>
     `;
 
+        console.log("Final HTML content:", contentData);
+
         // 创建文档选项
         const options = {
           margin: {
@@ -604,38 +624,39 @@ export default {
       }
     },
 
-    // 新增方法:等待所有图片加载完成
-    async waitForImages(element) {
-      const images = element.getElementsByTagName("img");
-      const imagePromises = Array.from(images).map((img) => {
+    // 修改 convertImageToBase64 方法
+    async convertImageToBase64(img) {
+      return new Promise((resolve, reject) => {
         if (img.complete) {
-          return Promise.resolve();
-        } else {
-          return new Promise((resolve) => {
-            img.onload = img.onerror = resolve;
+          this.toDataURL(img.src, (dataUrl) => {
+            img.src = dataUrl;
+            resolve();
           });
+        } else {
+          img.onload = () => {
+            this.toDataURL(img.src, (dataUrl) => {
+              img.src = dataUrl;
+              resolve();
+            });
+          };
+          img.onerror = reject;
         }
       });
-      await Promise.all(imagePromises);
     },
 
-    // 新增方法:将图片转换为Base64
-    async convertImageToBase64(img) {
-      if (img.src.startsWith("data:")) {
-        return;
-      }
-      try {
-        const response = await fetch(img.src);
-        const blob = await response.blob();
-        const base64 = await new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onloadend = () => resolve(reader.result);
-          reader.readAsDataURL(blob);
-        });
-        img.src = base64;
-      } catch (error) {
-        console.error("Error converting image to Base64:", error);
-      }
+    // 新增 toDataURL 方法
+    toDataURL(url, callback) {
+      var xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        var reader = new FileReader();
+        reader.onloadend = function () {
+          callback(reader.result);
+        };
+        reader.readAsDataURL(xhr.response);
+      };
+      xhr.open("GET", url);
+      xhr.responseType = "blob";
+      xhr.send();
     },
     /* 终 */
     /* pdf导出 */