英文:
prevent html2pdf from considering head style
问题
以下是代码的翻译部分：
我正在使用以下代码生成PDF文件，使用html2pdf库：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
<style>
#content {
color: red;
}
</style>
</head>
<body>
<div id="content">
<h1>Hello, world!</h1>
<p>This is some HTML content.</p>
</div>
<button id="download-button">Download PDF</button>
<script>
var content = document.getElementById("content");
var options = {
margin: [10, 10, 10, 10],
filename: 'output.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 4 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: 'avoid-all' }
};
document.getElementById("download-button").addEventListener("click", function() {
html2pdf().set(options).from(content).save();
});
</script>
</body>
这将生成具有红色字体颜色的PDF文件。您希望如何防止这种情况，使其不使用添加在头部部分的任何样式或CSS？
不要翻译的部分：
- 代码部分
- "I am using below code to generate pdf using html2pdf"
- "This generate pdf with font color red, how can I prevent this, so it should not use any style or css that is added in head section."
英文:
I am using below code to generate pdf using html2pdf
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
<style>
#content {
color: red;
}
</style>
</head>
<body>
<div id="content">
<h1>Hello, world!</h1>
<p>This is some HTML content.</p>
</div>
<button id="download-button">Download PDF</button>
<script>
var content = document.getElementById("content");
var options = {
margin: [10, 10, 10, 10],
filename: 'output.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 4 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: 'avoid-all' }
};
document.getElementById("download-button").addEventListener("click", function() {
html2pdf().set(options).from(content).save();
});
</script>
</body>
This generate pdf with font color red, how can I prevent this, so it should not use any style or css that is added in head section.
答案1
得分: 1
以下是代码的翻译部分：
// 尝试创建一个新元素，其内容相同，不包含任何样式，或者您可以将您的样式添加到新元素中：
const myContent = document.createElement('div');
myContent.innerHTML = content.innerHTML;
// 设置您的样式...
myContent.style.cssText = 'color:green;';
html2pdf().set(options).from(myContent).save();
// 要排除特定样式表是不可能的，除非渲染整个页面时排除样式。
// 执行以下步骤：
// - 克隆整个页面
// - 排除特定样式表
// - 在iframe中渲染克隆的页面
// - 获取iframe内部的PDF内容元素
// - 获取其样式
// - 创建一个新元素并应用内容的样式和内容
// - 打印它
// 在这里，生成的PDF应该忽略`color: red !important;`并应用`color: green;`：
// ...
请注意，以上是您提供的代码的翻译部分。如有需要，可以继续提出问题或请求进一步的帮助。
英文:
Try creating a new element with the same content, which will not include any style, or you can add your style to the new element:
const myContent = document.createElement('div');
myContent.innerHTML = content.innerHTML;
// set your styles..
myContent.style.cssText = 'color:green;';
html2pdf().set(options).from(myContent).save();
EDIT
To exclude a specific stylesheet is impossible without rendering the whole page with excluded styles.
To do so:
- clone the whole page
- exclude specific stylesheet
- render the cloned page in an iframe
- get pdf content element inside an iframe
- get its styles
- create a new element and apply content's styles and content
- print it
Here, the resulting PDF should ignore color: red !important; and apply color: green; instead:
<!-->
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
<style>
#content {
color: red !important;
}
</style>
</head>
<body>
<style>
#content {
color: green;
}
</style>
<div id="content">
<h1>Hello, world!</h1>
<p>This is some HTML content.</p>
</div>
<button id="download-button">Download PDF</button>
<script>
var options = {
margin: [10, 10, 10, 10],
filename: 'output.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { scale: 4 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: 'avoid-all' }
};
document.getElementById("download-button").addEventListener("click", function() {
// copy the page
const docCopy = document.cloneNode(true);
// disable whatever style
docCopy.querySelector('head style').remove();
// get the print content
const content = docCopy.getElementById("content");
// render it inside an iframe
const iframe = document.createElement('iframe');
const html = docCopy.documentElement.innerHTML;
iframe.style.cssText = 'position:absolute; top: -9999999px;'
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
// now get its css styles
const contentComputedStyle = window.getComputedStyle(iframe.contentWindow.document.getElementById('content'));
// create and apply css and content it the new element
const pdfContent = docCopy.createElement('div');
pdfContent.innerHTML = content.innerHTML;
[...contentComputedStyle].forEach(prop => pdfContent.style.setProperty(prop, contentComputedStyle.getPropertyValue(prop), contentComputedStyle.getPropertyPriority(prop)));
// print the new element
html2pdf().set(options).from(pdfContent).save();
});
</script>
</body>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论