Question

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

但为了使我的预览更具可读性，我在页面上添加了一些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();
    }
  });

但那没关系。

有什么想法吗？

Answer 1

再次是我。

不确定是否有类似我要找的东西。因此我自己做了。

我添加了一个页面参数，并在代码中进行检查，看看它是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>

wkhtmltopdf从PDF中排除css文件，但以HTML格式显示

1 个答案: