解决HTML2Canvas导出PDF时图片跨域问题的实战技巧

在Web开发过程中，利用html2canvas库将网页内容转换为PDF是一种常见需求，特别是在需要提供“打印为PDF”功能的应用场景中。然而，在这个过程中，开发者经常会遇到图片资源因跨域策略（CORS）而无法正确渲染的问题。本文将通过一个实际案例，探讨如何解决这一难题，并介绍一种通过Fetch API结合时间戳来规避图片缓存导致的跨域问题的方法。

问题背景

当你尝试使用html2canvas将包含外部图片的网页转换为PDF时，浏览器的安全策略可能会阻止这些图片的加载，因为它们来自不同的源（即跨域）。这种情况下，浏览器的控制台通常会显示类似“Tainted canvases may not be exported.”的错误信息。

初步尝试：使用Fetch请求图片

为了解决跨域问题，一种常见的做法是直接使用Fetch API预先请求图片，然后将其转换为Base64编码嵌入到HTML中。这样做可以绕过CORS限制，因为Base64编码的数据被视为内联数据，不会触发跨域安全策略。

async function fetchImageAsBase64(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

挑战：缓存导致的跨域

但如你所遇，即使图片已经通过服务器配置允许跨域（设置了适当的CORS头），如果该图片之前已经被缓存，再次通过Fetch请求时，浏览器可能依然使用旧的缓存响应，而这个响应可能没有包含必要的CORS头信息，从而导致跨域问题再次出现。

解决方案：添加时间戳参数

为了避免使用缓存中的图片响应，一个简单有效的方法是在图片URL后面添加一个查询字符串参数，比如当前的时间戳，这样每次请求的URL都会被视为唯一的，从而迫使浏览器重新从服务器获取图片资源。

function addTimestampToUrl(url) {
    return `${url}?timestamp=${new Date().getTime()}`;
}

// 使用改进后的函数请求图片
async function fetchImageWithTimestamp(url) {
    const urlWithTimestamp = addTimestampToUrl(url);
    return fetchImageAsBase64(urlWithTimestamp);
}

应用实践

在使用html2canvas之前，先遍历页面中的所有图片元素，使用上述fetchImageWithTimestamp方法获取它们的Base64编码，然后替换原图片的src属性。之后，再执行html2canvas的转换操作，即可成功避免跨域问题。

// 假设images是一个包含页面中所有img元素的数组
const images = document.querySelectorAll('img');
Promise.all(images.map(img => fetchImageWithTimestamp(img.src)))
    .then(base64Images => {
        // 替换图片src为Base64编码
        base64Images.forEach((base64, index) => {
            images[index].src = base64;
        });

        // 确保所有图片已加载完毕后再执行html2canvas
        Promise.all(Array.from(images).map(img => new Promise(resolve => {
            if (img.complete) {
                resolve();
            } else {
                img.onload = resolve;
            }
        }))).then(() => {
            html2canvas(document.body).then(canvas => {
                // 将canvas转换为PDF的操作...
            });
        });
    });

总结

通过在图片URL后添加时间戳参数，我们成功地解决了由于图片缓存导致的跨域问题，确保了html2canvas在导出PDF时能够正确处理所有图片资源。这种方法不仅简单易行，而且高效可靠，是处理此类问题的一个实用技巧。在实际开发中，还需注意合理设置服务器端的CORS策略，以从根本上支持前端的跨域请求。

大纲

解决HTML2Canvas导出PDF时图片跨域问题的实战技巧#

问题背景#

初步尝试：使用Fetch请求图片#

挑战：缓存导致的跨域#

解决方案：添加时间戳参数#

应用实践#