Question

我正在尝试使用git中的jsPdf插件来生成部分应用程序的pdf。链接到pdf插件：https://github.com/MrRio/jsPDF 我在做什么 1）使用svg和canvas生成我的应用程序部分文本和图像的组合（jpeg格式） 2）将这些图像添加到pdf中 3）同样：

var doc = new jsPDF();

doc.setFontSize(40);
doc.text(35, 25, "Paranyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

4）所以我无法得到带有这些图像的pdf，只是显示文字而且显示的是黑盒子代替图像（不能在这里粘贴我的代码）

尝试将图像格式更改为PNG，然后显示白框而不是黑框。

更新清洁svg是这个问题的解决方案。但现在我无法得到如何清理svg

解决方案 在代码中创建svg元素的位置添加标记。在外部指定标记之前，Firefox不理解正在创建svg元素。

var svg = '<svg>' + chartArea.innerHTML + '</svg>';

更新将viewPort和viewBox属性添加到svg以正确渲染FF上的svg。

** P.S。：

管理员无缘无故地回答我的问题;对于那些谁需要回答这个问题，我已经更新了问题本身答案。我不希望任何人花费数周的时间来搜索回答这个特殊的问题，因为我花了几周的时间来解决这个问题解。如果这对至少很少的人有帮助，我将很高兴。

**

ANSWER 所有浏览器都不会显示与SVG类似的行为。所以在chrome中使用下面的语句直接添加svg元素会很好用

var svg = objDivToAddToSVG.innerHTML;

在Firefox上，

var svg = '<svg viewBox = "-50 -50 ' + (mainDiv.width*2) + ' ' + (mainDiv.height*2) + '" width="' + mainDiv.width + '" height="' + mainDiv.height + '">' + objDivToAddToSVG.innerHTML + '</svg>';

mainDiv是围绕svg的<div>元素。

SVG包含正在转换为图像的数据。无需任何设置即可在Chrome中正确显示图像。但是在firefox中，需要指定svg属性viewport和viewbox以让浏览器知道svg维度。

有关视口和视窗的信息，请按照此link

进行操作

在上面的firefox代码中，viewport和viewbox的指定如下： 1）视口 - 使用height＆amp; width属性 2）viewbox - 使用

viewBox = "-50 -50 ' + (mainDiv.width*2) + ' ' + (mainDiv.height*2)

即。 viewBox = x y min-height min-width

对于所有其他浏览器（测试歌剧和野生动物园;未在IE上测试）

var svg = objDivToAddToSVG.innerHTML;

jsPDF插件无法在firefox中运行：图片显示黑框

0 个答案: