如何阻止html2pdf读取<head>中的样式生成无额外样式的PDF

要让html2pdf完全不使用页面里的任何样式，你可以试试下面两种实用方法：

方法一：克隆内容并彻底剥离所有继承样式 #

核心思路是把要导出的内容克隆一份，清除它及所有子元素的内联样式，再套一个带有全局重置样式的容器，确保不继承页面的全局样式。

修改你的点击事件代码如下：

document.getElementById("download-button").addEventListener("click", function() {
    // 克隆目标内容节点
    const clonedContent = content.cloneNode(true);
    
    // 清除克隆元素自身的内联样式
    clonedContent.removeAttribute('style');
    // 遍历所有子元素，清除它们的内联样式
    const allChildElements = clonedContent.querySelectorAll('*');
    allChildElements.forEach(el => el.removeAttribute('style'));
    
    // 创建一个带样式重置的临时容器
    const resetWrapper = document.createElement('div');
    // 用内联样式强制重置所有继承的样式
    resetWrapper.style.cssText = `
        all: unset;
        display: block;
        width: 100%;
        font-family: serif; /* 可手动设置基础样式，比如字体 */
    `;
    resetWrapper.appendChild(clonedContent);
    
    // 使用重置后的内容生成PDF
    html2pdf().set(options).from(resetWrapper).save();
    
    // 生成完成后移除临时容器
    resetWrapper.remove();
});

方法二：通过html2canvas配置强制覆盖样式 #

html2pdf依赖html2canvas生成截图，你可以利用html2canvas的onclone钩子，在克隆文档时注入全局重置样式，强制覆盖里的原有样式：

修改options里的html2canvas配置：

var options = {
    margin: [10, 10, 10, 10],
    filename: 'output.pdf',
    image: { type: 'jpeg', quality: 1 },
    html2canvas: { 
        scale: 4,
        // 添加克隆文档时的样式重置钩子
        onclone: function(clonedDoc) {
            const resetStyle = clonedDoc.createElement('style');
            resetStyle.textContent = `
                * {
                    all: unset !important;
                    display: block !important;
                    font-family: serif !important;
                }
                h1 {
                    font-size: 2em !important;
                    margin-bottom: 0.67em !important;
                }
                p {
                    margin-bottom: 1em !important;
                }
                /* 可根据需要补充基础标签样式 */
            `;
            clonedDoc.head.appendChild(resetStyle);
        }
    },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak: { mode: 'avoid-all' }
};

内容的提问来源于stack exchange，提问作者Jay