|
@@ -518,16 +518,34 @@ export default {
|
|
|
|
|
|
try {
|
|
try {
|
|
let contentClone = this.$refs.content.cloneNode(true);
|
|
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) => {
|
|
contentClone.querySelectorAll('input[type="text"]').forEach((input) => {
|
|
@@ -573,6 +591,8 @@ export default {
|
|
</html>
|
|
</html>
|
|
`;
|
|
`;
|
|
|
|
|
|
|
|
+ console.log("Final HTML content:", contentData);
|
|
|
|
+
|
|
// 创建文档选项
|
|
// 创建文档选项
|
|
const options = {
|
|
const options = {
|
|
margin: {
|
|
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) {
|
|
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导出 */
|
|
/* pdf导出 */
|