在生成的pdf中，DocRaptor不显示输入和文本区域的值。

Question

我正在使用DocRaptor将一个HTML页面转换为pdf。不幸的是，在输入和文本区域中的值没有显示在生成的pdf中（我的复选框和表格的值显示了）。格式也和html页面不一样。

示例代码是

<div class="form-group row col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <label for="pdfName" class="text-right col-lg-1 col-md-2 col-sm-2 col-xs-12 col-form-label">Name:</label>
    <div class="col-lg-6 col-md-5 col-sm-4 col-xs-12">
        <input class="fullWidth" type="text" id="pdfName" name="pdfName" placeholder="Name" disabled>
    </div>

    <label for="pdfTime" class="text-right col-lg-2 col-md-2 col-sm-2 col-xs-12 col-form-label">Cooking Time:</label>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
        <input class="fullWidth" type="text" id="pdfTime" name="pdfTime" placeholder="Cooking Time" disabled>
    </div>
</div>

function downloadPDF() {    

    var recipeName = $.trim($("#pdfName").val()).replace(/ /g,"_");
    DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
        test: true, // test documents are free, but watermarked
        type: "pdf",
        name: recipeName+".pdf",
        document_content: document.querySelector('#pdfCateringRecipeForm').innerHTML, // use this page's HTML
        // document_content: "<h1>Hello world!</h1>",               // or supply HTML directly
        // document_url: "http://example.com/your-page",            // or use a URL
        // javascript: true,                                        // enable JavaScript processing
        // prince_options: {
           media: "screen",                                       // use screen styles instead of print styles
        // }
    })
}

pdf页面是：

html页面是：

Answer 1

我们将遇到的一个问题是，你需要发送完整的HTML--样式，JavaScript，一切--到你的DocRaptor请求中。你不能只发送你的网页的一个特定部分的innerHTML。

例如，看起来你的网页使用的是Bootstrap。你需要包含包含Bootstrap的HTML，以及你使用Bootstrap布置的具体内容。

所以我们需要这样的内容。<html><head>...style and script elements...</head><body>...your content here</body></html>

因为DocRaptor的服务器在生成文档的过程中并没有提供Bootstrap、jQuery或其他任何脚本或样式给你。

这样做有意义吗？

像Bootstrap这样的库还有一件大事，就是你经常需要把媒体类型也设置为 "屏幕"，因为Bootstrap默认的 "打印 "样式经常会剥离或覆盖样式。链接

常见的Bootstrap 3问题。链接

如何解决Bootstrap 3出现的几个常见问题？

我还附上了一篇来自DocRaptor的知识库文章，希望能涵盖你可能需要解决的任何其他项目。

再一次，让我知道这是否有意义，如果还有什么我可以帮助的! 乐意为之。

PS：你将需要保持 'prince_options' 并可能 'javascript' 您向DocRaptor提出的请求中的配置选项部分。看来你没有 'media' 行被注释掉，但 'media' 属性需要嵌套在 'prince_options' 以便工作。

Answer 2

次要做法是将内容嵌入到所需的周边HTML、样式和脚本中。

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://docraptor.com/docraptor-1.0.0.js"></script>
  <style>
    /*
    PrinceXML calculates Bootstrap's ".66666667%" grid width literally, resulting in a
    grid that is technically over 100%. Prince then drops the last column to a new row.
    These styles override Bootstrap and set the appropriate grid elements to simply
    end in "...6%".

    Also overriding the widths for non-...67-elements because Bootstrap interprets DocRaptor
    views as xs by default and makes columns 100% width as a result.
    */
    .col-xs-12 {
        width: 100%
    }
    .col-xs-11 {
        width: 91.66666666%
    }
    .col-xs-10 {
        width: 83.33333333%
    }
    .col-xs-9 {
        width: 75%
    }
    .col-xs-8 {
        width: 66.66666666%
    }
    .col-xs-7 {
        width: 58.33333333%
    }
    .col-xs-6 {
        width: 50%
    }
    .col-xs-5 {
        width: 41.66666666%
    }
    .col-xs-4 {
        width: 33.33333333%
    }
    .col-xs-3 {
        width: 25%
    }
    .col-xs-2 {
        width: 16.66666666%
    }
    .col-xs-1 {
        width: 8.444444444%
    }
    .col-xs-pull-11 {
        right: 91.66666666%
    }
    .col-xs-pull-8 {
        right: 66.66666666%
    }
    .col-xs-pull-5 {
        right: 41.66666666%
    }
    .col-xs-pull-2 {
        right: 16.66666666%
    }
    .col-xs-push-11 {
        left: 91.66666666%
    }
    .col-xs-push-8 {
        left: 66.66666666%
    }
    .col-xs-push-5 {
        left: 41.66666666%
    }
    .col-xs-push-2 {
        left: 16.66666666%
    }
    .col-xs-offset-11 {
        margin-left: 91.66666666%
    }
    .col-xs-offset-8 {
        margin-left: 66.66666666%
    }
    .col-xs-offset-5 {
        margin-left: 41.66666666%
    }
    .col-xs-offset-2 {
        margin-left: 16.66666666%
    }
  </style>

  <script>
    function downloadPDF() {

      var innerContent = document.querySelector('#pdfCateringRecipeForm').innerHTML
      var wrapper = `
      <html>
          <head>
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"><\/script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"><\/script>
            <script src="https://docraptor.com/docraptor-1.0.0.js"><\/script>
            <style>
              /*
              PrinceXML calculates Bootstrap's ".66666667%" grid width literally, resulting in a
              grid that is technically over 100%. Prince then drops the last column to a new row.
              These styles override Bootstrap and set the appropriate grid elements to simply
              end in "...6%".

              Also overriding the widths for non-...67-elements because Bootstrap interprets DocRaptor
              views as xs by default and makes columns 100% width as a result.
              */
              .col-xs-12 {
                  width: 100%
              }
              .col-xs-11 {
                  width: 91.66666666%
              }
              .col-xs-10 {
                  width: 83.33333333%
              }
              .col-xs-9 {
                  width: 75%
              }
              .col-xs-8 {
                  width: 66.66666666%
              }
              .col-xs-7 {
                  width: 58.33333333%
              }
              .col-xs-6 {
                  width: 50%
              }
              .col-xs-5 {
                  width: 41.66666666%
              }
              .col-xs-4 {
                  width: 33.33333333%
              }
              .col-xs-3 {
                  width: 25%
              }
              .col-xs-2 {
                  width: 16.66666666%
              }
              .col-xs-1 {
                  width: 8.444444444%
              }
              .col-xs-pull-11 {
                  right: 91.66666666%
              }
              .col-xs-pull-8 {
                  right: 66.66666666%
              }
              .col-xs-pull-5 {
                  right: 41.66666666%
              }
              .col-xs-pull-2 {
                  right: 16.66666666%
              }
              .col-xs-push-11 {
                  left: 91.66666666%
              }
              .col-xs-push-8 {
                  left: 66.66666666%
              }
              .col-xs-push-5 {
                  left: 41.66666666%
              }
              .col-xs-push-2 {
                  left: 16.66666666%
              }
              .col-xs-offset-11 {
                  margin-left: 91.66666666%
              }
              .col-xs-offset-8 {
                  margin-left: 66.66666666%
              }
              .col-xs-offset-5 {
                  margin-left: 41.66666666%
              }
              .col-xs-offset-2 {
                  margin-left: 16.66666666%
              }
            <\/style>
          <\/head>

          <body>
            --!CONTENT GOES HERE!--
          <\/body>

      <\/html>`

      var finalContent = wrapper.replace('--!CONTENT GOES HERE!--', innerContent);

      var recipeName = $.trim($("#pdfName").val()).replace(/ /g, "_");
      DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
        test: true,
        type: "pdf",
        name: recipeName + ".pdf",
        document_content: finalContent,
        prince_options: { media: "screen" }
      })
    }
  </script>
</head>

<body style="margin-left: 15px; margin-right: -15px;" >
  <div id="pdfCateringRecipeForm">
    <div>
      <br />
      <br />
      <br />
      <br />
      TEST:
      <br />
      <br />
      <br />
      <br />
    </div>
    <div class="row col-xs-12">
      <label for="pdfName" class="col-xs-4 col-form-label">Name:</label>
      <div class="col-xs-8">
        <input class="form-control input-lg" type="text" id="pdfName" name="pdfName" placeholder="Name" disabled>
      </div>
      <label for="pdfTime" class="col-xs-4 col-form-label">Cooking Time:</label>
      <div class="col-xs-8">
        <input class="form-control input-lg" type="text" id="pdfTime" name="pdfTime" placeholder="Cooking Time" disabled>
      </div>
    </div>
  </div>
  <button type="button" class="btn btn-primary" onclick="downloadPDF()">Download PDF</button>
</body>

</html>

一些注意事项。

JavaScript文本中的硬编码标签不能有，因为浏览器会将其解释为HTML，即使它是在一个字符串中！所以必须在JavaScript中用<script>来转义。所以必须在JavaScript中用<script>进行转义。
Bootstrap认为大多数PDF都是在额外的小设备上，所以我不得不添加所有这些样式。有点恶心，但我认为是必要的。
你会注意到，脚本的风格已经重复在HTML和发送到DocRaptor的东西。这是因为DocRaptor需要再次了解Bootstrap。如果你要调试一个内容请求或查看doc_log，而没有这些额外的代码，你会发现Bootstrap等没有被包含在内。
我们在'--！content goes here！--'上用我们想制作成PDF格式的内容做一个替换，以便用适当的脚本和样式来包装内容.总的来说，我认为这有点笨重，但它可以工作。总的来说，我认为这是一个有点笨重的，但它可以工作，我绝对可以看到它的一个用例。它可能会有点棘手的调试，但我希望这仍然可以让你继续前进或更好地理解问题。

让我知道这是否有帮助，如果还有什么我可以做的。很高兴能帮到你!

在生成的pdf中，DocRaptor不显示输入和文本区域的值。

问题描述投票：0回答：1

1个回答

最新问题

在生成的pdf中，DocRaptor不显示输入和文本区域的值。

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1