CSS边框半径在jQuery-word-export插件中不起作用

我试图用内联CSS导出一个圆形图像，但是当导出到Word文档时，我得到一个巨大的矩形图像。为什么？我该如何解决这个问题？是否有另一种简单的导出方法（对.docx或PDF或其他）？CSS边框半径在jQuery-word-export插件中不起作用

我正在使用由markwindoll开发的jQuery-word-export插件。

我试图是这样的：Profile picture example
我所得到的是这样的：Exported example

我的代码是：

<div id="export-content"> 
    <!-- PROFILE PICTURE --> 
    <div id="divProfielfoto" ng-controller="profielfotoCtrl"> 
     <img id="profielfoto" ng-src="{{profielfoto}}" alt="profielfoto" style="width: 125px;height:125px;margin-bottom: 20px; border-radius:50%; border: 7px solid orange;" /> 
    </div> 
    <input style="display: none;" id="profileUpload" type="file" accept="image/*"/> 
    <!-- PROFILE PICTURE END --> 
</div> 
<button class="word-export" onclick="export()">Export as .doc</button>

我导出代码如下：

$(".word-export").click(function (event) { 
     $("#export-content").wordExport("CV " + naam); 
    });

任何其他插件/解决方案也是受欢迎的，如果它们易于使用（我是网络应用程序开发的初学者）

来源

2016-11-14 Johnnybossboy

我猜想导出库没有代码来支持Word中的圆形边框？不幸的是，除了重写库，或者将其作为请求添加到开发人员之外，可能没有那么多。 – junkfoodjunkie

如果它不起作用，你有没有试图通过背景图像为你的#divProfielfoto div使用该边框？ – nguyenhoai890

nguyenhoai890我试过了，但它不起作用。那么，在导出的文件中，它可以与边框（它显示）一起工作，但不是作为一个圆圈 – Johnnybossboy

插件从HTML中的所有图像绘制画布。你所要做的事情是替换此：

// Embed all images using Data URLs 
     var images = Array(); 
     var img = markup.find('img'); 
     for (var i = 0; i < img.length; i++) { 
      // Calculate dimensions of output image 
      var w = Math.min(img[i].width, options.maxWidth); 
      var h = img[i].height * (w/img[i].width); 
      // Create canvas for converting image to data URL 
      var canvas = document.createElement("CANVAS"); 
      canvas.width = w; 
      canvas.height = h; 
      // Draw image to canvas 
      var context = canvas.getContext('2d'); 
      context.drawImage(img[i], 0, 0, w, h); 
      // Get data URL encoding of image 
      var uri = canvas.toDataURL("image/png"); 
      $(img[i]).attr("src", img[i].src); 
      img[i].width = w; 
      img[i].height = h; 
      // Save encoded image to array 
      images[i] = { 
       type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")), 
       encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")), 
       location: $(img[i]).attr("src"), 
       data: uri.substring(uri.indexOf(",") + 1) 
      }; 
     }

与此：

  // Draw image to canvas 
      var context = canvas.getContext('2d'); 
      context.save(); 
      context.beginPath(); 
      context.arc(canvas.width/2, canvas.height/2, 62.5, 0, 2 * Math.PI, false); 
      context.lineWidth = 10; 
      context.clip(); 
      context.drawImage(img[i], 0, 0, w, h);

并创建一个圆形图像。问题解决了！

来源

2016-11-29 10:46:27 Johnnybossboy

CSS边框半径在jQuery-word-export插件中不起作用

回答

相关问题