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插件中不起作用

回答

相關問題