Question

我正在开发一个项目，我需要在客户端生成一个pdf文件（onclick saveFile as PDF），因为有些数据不会被发送到服务器。我已经阅读了这些可用的选项; fileSaver.js和html2canvas似乎没有帮助。我还想指出javascripts不太好。这是我的js代码

<script type="text/javascript">
$(document).ready(function() {
    $("#saveOutput").click(function() {
        $("#Screenshot").html2canvas({ 
                onrendered: function(canvas) {
                var png = canvas.toDataURL()
                window.open(png);
              }
            });
          });
  });

和我的Html

 <div id="Screenshot">
<p>This is it</p>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="250" style="height: 250px; width: 250px;">       
      <circle id="1" cx="100" cy="100" r="25" fill="#A52A2A"></circle>
  </svg>
</div>
<div id="content">
    <a class="button" id="saveOutput" href="#">Save as File</a>
</div>

为什么它无法显示SVG文件？如何将这些文件转换为Canvas？有人可以通过代码示例向我展示吗？任何帮助将不胜感激

Answer 1

解决方案1：您可以使用支持svg的最新html2canvas 元素。
解决方案2：在调用html2canvas函数之前，您可以进行转换所有现有的svg元素都支持canvas元素通过html2canvas。对于此转换，您可以使用canvg.js。

Answer 2

就像已经在其他答案中说的那样：最新的html2canvas支持svg元素。

但是很明显，CSS未被应用，并且在设置CSS的“ width”样式和svg的“ width”属性时存在错误。

在屏幕截图之前，我对svg元素进行了处理。

var svgElements = document.body.querySelectorAll('svg');
svgElements.forEach(function(item) {
    item.setAttribute("width", item.getBoundingClientRect().width);
    item.style.width = null;
});

Answer 3

尝试在以下链接下载最新版本的html2canvas

https://github.com/niklasvh/html2canvas/releases

目前版本为0.5.0-alpha1

我尝试了它，它适用于我。

Answer 4

遇到同样的问题。

将所有 CSS 移动到容器元素 (div) 并将 CSS（在我的例子中为 position:absolute;）应用到容器元素而不是 svg 元素。

正如 Isabella Lopes 正确指出的那样，高度和宽度需要作为属性而不是样式来应用。

使用html2canvas时不显示SVG

4 个答案: