克隆，播放和替換克隆的Dom-Javascript/Jquery

我試圖將整個頁面導出爲PDF。在某些情況下，如果從單獨文件加載CSS不會應用於導出的PDF。所以我試圖使用這段代碼將所有的CSS轉換爲內聯。克隆，播放和替換克隆的Dom-Javascript/Jquery

(function ($) { 
    var rules = document.styleSheets; 
    for(var rl in rules){ 
     var rule = rules[rl].cssRules; 
     try{ 
     for (var idx = 0, len = rule.length; idx < len; idx++) { 
     $(rule[idx].selectorText).each(function (i, elem) { 
      if($(elem).is(":visible")) 
      elem.style.cssText += rule[idx].style.cssText; 
     }); 
     } 
     }catch(e){ 
    console.log(e); 
    } 
    } 

})(jQuery);

運行此代碼後，我導出的PDF工作正常。但我的DOM不像以前那樣。無論如何，在操作之前我可以克隆我的DOM，並且在使用DOM之後像以前一樣替換克隆的DOM。希望我的問題很明確。謝謝你期待的幫助。

來源

2017-03-27 Vignesh Gopalakrishnan

你如何導出爲PDF - 聽起來更像是在無論是這樣做 –

我使用Canvg插件SVG轉換爲Canvas和JSPDF錯誤將其轉換爲PDF。如果您有小冊子地圖，則由於未在導出的PDF中應用CSS，所以其中的所有拼貼都會被加密。希望你有我想說的。 –

在這個片段中有2點更簡單的方法比修改一個樣式表：

隔離通過包裝元素，<embed>，或<object>周圍則應用樣式引用包裝元素。這在片段中用div.jframe作爲包裝來演示。
用新規則集註入<style>塊。

如果兩者中的任何一個都以適度的護理完成，則不應留有衝突的風格。

注意： iframe中的PDF是沙盒，所以它不在那裏，但一切仍然適用。

代碼片段

function injectStyles(rule) { 
 
    document.body.insertAdjacentHTML('afterbegin', 
 
    '&shy;<style>' + rule + '</style>'); 
 
} 
 

 
injectStyles('iframe:hover { border: 5px solid blue; }');

.jframe iframe { 
 
    outline: 10px solid tomato; 
 
}

<div class='jframe'> 
 
    <iframe src='http://che.org.il/wp-content/uploads/2016/12/pdf-sample.pdf' height='400' width='400'></iframe> 
 
</div>

來源

2017-03-27 12:30:32 zer00ne

克隆，播放和替換克隆的Dom-Javascript/Jquery

回答

相關問題