blocks|key|89653|text|您不是也应该使用jspdf.plugin.from_html.js库吗？除了主库(jspdf.js)之外，您还必须使用其他库来执行“特殊操作”(比如使用图像的jspdf.plugin.addimage.js+)。检查https://github.com/MrRio/jsPDF。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|89654|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF^0|30|U|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Shouldn't you also be using the jspdf.plugin.from_html.js library? Besides the main library (jspdf.js), you must use other libraries for "special operations" (like jspdf.plugin.addimage.js for using images). Check <a href="https://github.com/MrRio/jsPDF" rel="nofollow">https://github.com/MrRio/jsPDF</a>.</p>


blocks|key|306723|text|您可以使用html中的pdf，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|306724|步骤1:将以下脚本添加到头部|306725|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>|code-block|syntax|javascript|306726|or+download+locally|offset|length|306727|第2步:添加执行jsPDF代码的HTML脚本|306728|自定义此参数以传递标识符，或仅将#content更改为所需的标识符。|306729|+<script>
++++function+demoFromHTML()+{
++++++++var+pdf+=+new+jsPDF('p',+'pt',+'letter');
++++++++//+source+can+be+HTML-formatted+string,+or+a+reference
++++++++//+to+an+actual+DOM+element+from+which+the+text+will+be+scraped.
++++++++source+=+$('#content')[0];

++++++++//+we+support+special+element+handlers.+Register+them+with+jQuery-style+
++++++++//+ID+selector+for+either+ID+or+node+name.+("#iAmID",+"div",+"span"+etc.)
++++++++//+There+is+no+support+for+any+other+type+of+selectors+
++++++++//+(class,+of+compound)+at+this+time.
++++++++specialElementHandlers+=+{
++++++++++++//+element+with+id+of+"bypass"+-+jQuery+style+selector
++++++++++++'#bypassme':+function+(element,+renderer)+{
++++++++++++++++//+true+=+"handled+elsewhere,+bypass+text+extraction"
++++++++++++++++return+true
++++++++++++}
++++++++};
++++++++margins+=+{
++++++++++++top:+80,
++++++++++++bottom:+60,
++++++++++++left:+40,
++++++++++++width:+522
++++++++};
++++++++//+all+coords+and+widths+are+in+jsPDF+instance's+declared+units
++++++++//+'inches'+in+this+case
++++++++pdf.fromHTML(
++++++++++++source,+//+HTML+string+or+DOM+elem+ref.
++++++++++++margins.left,+//+x+coord
++++++++++++margins.top,+{+//+y+coord
++++++++++++++++'width':+margins.width,+//+max+width+of+content+on+PDF
++++++++++++++++'elementHandlers':+specialElementHandlers
++++++++++++},

++++++++++++function+(dispose)+{
++++++++++++++++//+dispose:+object+with+X,+Y+of+the+last+line+add+to+the+PDF+
++++++++++++++++//++++++++++this+allow+the+insertion+of+new+lines+after+html
++++++++++++++++pdf.save('Test.pdf');
++++++++++++},+margins
++++++++);
++++}
</script>|306730|第三步:添加你的正文内容|306731|<a+href="javascript:demoFromHTML()"+class="button">Run+Code</a>
<div+id="content">
++++<h1>++
++++++++We+support+special+element+handlers.+Register+them+with+jQuery-style.
++++</h1>
</div>|306732|Refer+to+the+original+tutorial|306733|See+a+working+fiddle|306734|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF|1|http://parall.ax/products/jspdf|2|http://jsfiddle.net/xzZ7n/4861/^0|0|0|0|0|J|0|0|0|0|0|0|0|0|U|1|0|0|K|2|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1F|8|@]|9|@$K|1G|L|1H|1|1I]]|A|$]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1O|8|@]|9|@$K|1P|L|1Q|1|1R]]|A|$]]|$1|Y|3|Z|5|6|7|1S|8|@]|9|@$K|1T|L|1U|1|1V]]|A|$]]|$1|10|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]|1A|$5|13|14|15|A|$16|1B]]]]

<p>you can use pdf from html as follows,</p>

<h3>Step 1: Add the following script to the header</h3>

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"&gt;&lt;/script&gt;
</code></pre>

<p><a href="https://github.com/MrRio/jsPDF" rel="noreferrer">or download locally</a></p>

<h3>Step 2: Add HTML script to execute jsPDF code</h3>

<p>Customize this to pass the identifier or just change #content to be the identifier you need.</p>

<pre><code> &lt;script&gt;
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
&lt;/script&gt;
</code></pre>

<h3>Step 3: Add your body content</h3>

<pre><code>&lt;a href="javascript:demoFromHTML()" class="button"&gt;Run Code&lt;/a&gt;
&lt;div id="content"&gt;
    &lt;h1&gt;  
        We support special element handlers. Register them with jQuery-style.
    &lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<h3><a href="http://parall.ax/products/jspdf" rel="noreferrer">Refer to the original tutorial</a></h3>

<h3><a href="http://jsfiddle.net/xzZ7n/4861/" rel="noreferrer">See a working fiddle</a></h3>


blocks|key|306772|text|您只需要此链接jspdf.min.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|306773|里面什么都有。|306774|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>|code-block|syntax|javascript|306775|entityMap|0|LINK|mutability|MUTABLE|url|https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js^0|7|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>You only need this link <a href="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js" rel="noreferrer">jspdf.min.js</a></p>

<p>It has everything in it. </p>

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"&gt;&lt;/script&gt;
</code></pre>


blocks|key|306811|text|首先，您必须创建一个处理程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|306812|var+specialElementHandlers+=+{
++++'#editor':+function(element,+renderer){
++++++++return+true;
++++}
};|code-block|syntax|javascript|306813|然后在click事件中编写以下代码：|306814|doc.fromHTML($('body').get(0),+15,+15,+{
++++'width':+170,+
++++'elementHandlers':+specialElementHandlers
++++++++});

var+pdfOutput+=+doc.output();
++++++++++++console.log(">>>"%2BpdfOutput+);|306815|假设你已经声明了doc变量。然后使用File-Plugin保存这个pdf文件。|306816|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>first, you have to create a handler.</p>

<pre><code>var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};
</code></pre>

<p>then write this code in click event:</p>

<pre><code>doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });

var pdfOutput = doc.output();
            console.log("&gt;&gt;&gt;"+pdfOutput );
</code></pre>

<p>assuming you've already declared doc variable.
And Then you have save this pdf file using File-Plugin.</p>


blocks|key|306844|text|在vuejs中它是如何适用的呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|306845|​|306846|function+onClick()+{
++var+pdf+=+new+jsPDF('p',+'pt',+'letter');
++pdf.canvas.height+=+72+*+11;
++pdf.canvas.width+=+72+*+8.5;

++pdf.fromHTML(document.body);

++pdf.save('test.pdf');
};

var+element+=+document.getElementById("clickbind");
element.addEventListener("click",+onClick);|code-block|syntax|javascript|306847|<h1>Dsdas</h1>

<a+id="clickbind"+href="#">Click</a>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>|306848|306849|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>how about in vuejs how is it applicable? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Dsdas&lt;/h1&gt;

&lt;a id="clickbind" href="#"&gt;Click&lt;/a&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I want to convert some of my divs into PDF and I've tried jsPDF library but with no success. It seems I can't understand what I need to import to make the library work. I've been through the examples and I still can't figure it out. I've tried the following:</p>

<pre><code>&lt;script type="text/javascript" src="js/jspdf.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>After jQuery and:</p>

<pre><code>$("#html2pdf").on('click', function(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170
    });
    console.log(doc);
});
</code></pre>

<p>for testing purposes but I receive:</p>

<pre><code>"Cannot read property '#smdadminbar' of undefined"
</code></pre>

<p>where <code>#smdadminbar</code> is the first div from the body.</p>


How to properly use jsPDF library

jQuery

我想要将我的一些div转换成PDF，我已经尝试了jsPDF库，但没有成功。看起来我不能理解我需要导入什么才能使这个库工作。我已经看过这些例子了，但我还是搞不懂。我尝试过以下几种方法：<script type="text/javascript" src="js/jspdf.min.js"></script>在jQuery...

问如何正确使用jsPDF库
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用jsPDF库EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何正确使用jsPDF库
EN