Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - jsPDF addHTML将低质量的图像导出到PDF(jsPDF addHTML exporting low quality image to PDF)

0 votes
366 views
in Technique[技术] by (71.8m points)

javascript - jsPDF addHTML将低质量的图像导出到PDF(jsPDF addHTML exporting low quality image to PDF)

Simple question searching from last 2 days but didnt find solution i am converting html to pdf using this addHTML api of jsPDF

(最近2天进行的简单问题搜索，但没有找到解决方案，我正在使用jsPDF的addHTML api将html转换为pdf)

$('#loadPdf').on('click', function() {
        var pdf = new jsPDF('p', 'in', 'a4');
        pdf.addHTML($('#complete')[0], function() {
            pdf.save('new.pdf');
            pdf.output('datauri');
        });
    });

this is producing blur image pdf the text is showing blurry.

(这将产生模糊图像pdf文本显示模糊。)

I searched a lot find some links (share below) but didn't get answer.

(我进行了很多搜索，找到了一些链接（在下面共享），但没有得到答案。)

html2canvas-generates-blurry-images

(html2canvas-generates-blurry-images)

addHTML image quality

(addHTML图像质量)

jspdf and addHTML / blurry font

(jspdf和addHTML /模糊字体)

is there any way available to get high quality image pdf.

(有什么方法可以获取高质量的图像pdf。)

If i don't use addHTML api and use any other then image is not displaying in pdf.

(如果我不使用addHTML api并使用其他任何API，则图像不会以pdf显示。)

help please

(请帮忙)

  ask by Mohammad Faizan khan translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Check out this solution:

(查看此解决方案：)

http://plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9

(http://plnkr.co/edit/nNSvHL8MZcT6nNKg9CG9)

From:

(从：)

https://github.com/MrRio/jsPDF/issues/339

(https://github.com/MrRio/jsPDF/issues/339)

<html>

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />

    <script data-require="[email protected]" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script src="html2canvas.min.js"></script>
    <script src="jspdf.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <span class="navbar-brand pull-left">Some Brand</span>
        </div>
      </div>
    </nav>
    <main class="container">
      <ol class="breadcrumb">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Fake Link</a>
        </li>
        <li class="active">Fake Page thing</li>
      </ol>
      <div class="jumbotron">
        <h1>Cool Export Test Page!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vehicula quam a dolor ullamcorper iaculis. In et laoreet est, commodo placerat lectus. Sed ac ullamcorper diam. Curabitur id sem leo. Proin non dictum massa. Aliquam et dui ante</p>
        <p>
          <button type="button" class="btn btn-primary btn-lg" id="button1">Export 1</button>
          <button type="button" class="btn btn-default btn-lg" id="button2">Export 2</button>
        </p>
      </div>
       <h3>Another header!</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
      <div class="panel panel-primary">
        <div class="panel-heading">Panel Heading</div>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Apples</th>
              <th>Bananas</th>
              <th>Carrots</th>
              <th>Donuts</th>
              <th>French Fries</th>
              <th>Grapes</th>
              <th>Ham</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
            <tr>
              <td>100%</td>
              <td>Lorem ipsum dolor sit</td>
              <td>0.2245</td>
              <td>$1.25</td>
              <td>1231235</td>
              <td>asdf</td>
              <td>11/11/12</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="well">
        <h3>Okay this is probably enough data</h3>
        <p>Finish strong with some lorem ipsum</p>
        </div>
    </main>
    <footer>
      <div class="container">This is a footer</div>
    </footer>
  </body>

</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...