0

我正在使用 wkhmtltopdf 并发现我遇到了问题。在转换为 PDF 之前，我正在使用 html 页面在浏览器中预览内容。

但是为了使它在我的预览中更具可读性，我在页面上添加了一些 css：（在 javascript/jQuery on document ready）

  $(document).ready(function () {
    if(window.location.href.indexOf("preview") > -1 && window.location.href.indexOf(".pdf") == -1) {
      appendCSStoHtml();
    }
  });

  function appendCSStoHtml() {
    $("body").css({"background-color":" #F0F8FF"});

    $("#previewHtml").css({
      "margin-left":"15%",
      "margin-right":"15%",
      "margin-top":"15px",
      "max-width":"1024px"});

    $("#previewHtml > h2").css({"margin-left":" 15px"});
  }

所以这一切都很好而且很花哨，但是当我基于这个 HTML 页面生成我的 PDF 时，css 也会在我的 PDF 中呈现，并且大纲和背景也存在于 PDF 中。

我不希望这种情况发生，我只希望我的 css 样式元素在 HTML 页面上呈现，而不是在 PDF 中呈现。

我怎样才能做到这一点？

我尝试了以下方法：

  $(document).ready(function () {
    if(window.location.href.indexOf("preview") > -1 && window.location.href.indexOf(".pdf") == -1) {
      appendCSStoHtml();
    }
  });

但这没关系。

有任何想法吗？

4

1 回答 1

0

又是我。

不确定是否有类似于我正在寻找的东西。于是我做了我自己的。

我添加了一个页面参数并在代码中检查它是否是true或false：

<script type="text/javascript">

  $(document).ready(function () {
    var url_string = window.location.href;
    var url = new URL(url_string);
    var renderCss = url.searchParams.get("renderCss");

    if(renderCss == 'true') {
      appendCSStoHtml();
    }
  });

  function appendCSStoHtml() {
    $("body").css({"background-color":" #F0F8FF"});

    $("#previewHtml").css({
      "margin-left":"15%",
      "margin-right":"15%",
      "margin-top":"15px",
      "max-width":"1024px"});

    $("#previewHtml > h2").css({"margin-left":" 15px"});
  }

</script>
于 2017-10-17T12:12:16.703 回答