我有一个由yarn添加的pdfmake的react项目,组件使用d3绘制图表(svg),我使用id来获取svg。 这就是我获取 svg 并将其添加到空文档的方法:
const svgElement = document.getElementById('svgConcrete');
const svgString = svgElement.outerHTML;
const docDefinition = {
content: [
{
columns: [
{ width: '*', text: '' },
{
svg: svgString,
width: 175,
height: 175
},
{ width: '*', text: '' },
]
}
],
}
应该显示的图像是这样的:
来自 HTML 的 svg 是:
<svg id="svgConcrete" width="400" height="300" viewBox="-80 -10 400 300" style="overflow: visible; margin-bottom: 40px;"><g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" transform="translate(0,240)"><path class="domain" stroke="currentColor" d="M0,0H310"></path><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.0</text></g><g class="tick" opacity="1" transform="translate(38.75,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.5</text></g><g class="tick" opacity="1" transform="translate(77.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1.0</text></g><g class="tick" opacity="1" transform="translate(116.25,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1.5</text></g><g class="tick" opacity="1" transform="translate(155,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2.0</text></g><g class="tick" opacity="1" transform="translate(193.75,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2.5</text></g><g class="tick" opacity="1" transform="translate(232.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">3.0</text></g><g class="tick" opacity="1" transform="translate(271.25,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">3.5</text></g><g class="tick" opacity="1" transform="translate(310,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">4.0</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M0,240V0"></path><g class="tick" opacity="1" transform="translate(0,240)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,205.71428571428572)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">5</text></g><g class="tick" opacity="1" transform="translate(0,171.42857142857144)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">10</text></g><g class="tick" opacity="1" transform="translate(0,137.14285714285714)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">15</text></g><g class="tick" opacity="1" transform="translate(0,102.85714285714286)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">20</text></g><g class="tick" opacity="1" transform="translate(0,68.57142857142857)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">25</text></g><g class="tick" opacity="1" transform="translate(0,34.2857142857143)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">30</text></g><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" transform="translate(0,240)" stroke-width="0.1"><path class="domain" stroke="currentColor" d="M0,0H310"></path><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(38.75,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(77.5,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(116.25,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(155,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(193.75,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(232.5,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(271.25,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g><g class="tick" opacity="1" transform="translate(310,0)"><line stroke="currentColor" y2="-240"></line><text fill="currentColor" y="3" dy="0.71em"></text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end" stroke-width="0.1"><path class="domain" stroke="currentColor" d="M0,240V0"></path><g class="tick" opacity="1" transform="translate(0,240)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,205.71428571428572)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,171.42857142857144)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,137.14285714285714)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,102.85714285714286)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,68.57142857142857)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,34.2857142857143)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g><g class="tick" opacity="1" transform="translate(0,0)"><line stroke="currentColor" x2="310"></line><text fill="currentColor" x="-3" dy="0.32em"></text></g></g><text x="155" y="280" font-size="12" text-anchor="middle" fill="gray">ε [×10⁻³]</text><text x="-75" y="120" font-size="12" fill="gray">σ [MPa]</text><path d="M0,240L13.563,220.875L27.125,203.5L40.688,187.875L54.25,174L67.813,161.875L81.375,151.5L94.937,142.875L108.5,136L122.063,130.875L135.625,127.5L149.188,125.875L162.75,125.714L176.312,125.714L189.875,125.714L203.437,125.714L217,125.714L230.562,125.714L244.125,125.714L257.687,125.714L271.25,125.714" fill="none" stroke="green" stroke-width="2"></path><path d="M0,240L13.563,211.313L27.125,185.25L40.688,161.813L54.25,141L67.813,122.813L81.375,107.25L94.937,94.313L108.5,84L122.063,76.313L135.625,71.25L149.188,68.813L162.75,68.571L176.312,68.571L189.875,68.571L203.437,68.571L217,68.571L230.562,68.571L244.125,68.571L257.687,68.571L271.25,68.571" fill="none" stroke="blue" stroke-width="2"></path><path d="M0,240L13.563,211.313L27.125,185.25L40.688,161.813L54.25,141L67.813,122.813L81.375,107.25L94.937,94.313L108.5,84L122.063,76.313L135.625,71.25L149.188,68.813L162.75,68.571L176.312,68.571L189.875,68.571L203.437,68.571L217,68.571L230.562,68.571L244.125,68.571L257.687,68.571L271.25,68.571" fill="none" stroke="red" stroke-width="2" style="stroke-dasharray: 3, 3;"></path><rect x="12" y="10" width="137" height="56" fill="#fff" stroke="#333" stroke-width="0.5"></rect><rect x="12" y="10" width="137" height="56" fill="#fff" stroke="#333" stroke-width="0.5"></rect><rect x="12" y="10" width="137" height="56" fill="#fff" stroke="#333" stroke-width="0.5"></rect><rect width="12" height="2" transform="translate(20, 20)" style="fill: green;"></rect><rect width="12" height="2" transform="translate(20, 36)" style="fill: blue;"></rect><rect width="12" height="2" transform="translate(20, 52)" style="fill: red;"></rect><text x="37" y="26" font-size="12" fill="gray">ULS</text><text x="37" y="42" font-size="12" fill="gray">Accidental damage</text><text x="37" y="58" font-size="12" fill="gray">Fire (t=0)</text></svg>
为什么会出现这种情况?我该如何解决它?
编辑:通过在 html 中添加此行
xmlns="http://www.w3.org/2000/svg"
version='1.1'
xmlnsXlink='http://www.w3.org/1999/xlink'
并使用此函数将 svg 转换为 png(然后是 base64):
async function getBase64Image() {
return new Promise((resolve, reject) => {
const img = new Image();
const svgElement = document.getElementById('svgConcrete');
const imageBlobURL = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgElement.outerHTML);
console.log("url: " + imageBlobURL)
img.onload = () => {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL('image/png');
resolve(dataURL);
};
img.onerror = (error) => {
reject(error)
};
img.src = imageBlobURL;
});
}
我得到的结果是:
我没有找到解决这个问题的方法。但我通过使用“canvg”库解决了这个问题。通过将 svg 附加到画布,我可以将该 png 转换为 base64 字符串。