Exporting Guide content (articles) to PDF

6 コメント

  • Brett Bowser
    Zendesk Community Team

    Hey Panu,

    AFAIK the Knowledge Base to PDF app in our marketplace is still functional. If you run into any issues with the integration, I would recommend reaching out to the developers directly from the app page I linked.

    I'll leave this post open in case other users have an alternative solution for you.

    Cheers!

    0
  • Panu Engelvuori

    Hi, 

    unfortunately when I try to install the app, it opens my Zendesk with an error message saying "the resource does not exist". I sent a message to the developer, but I doubt that I get a reply, at least based on the reviews section comments of the app. 

    So, if anyone has a workaround, I would be happy to hear it out. Exports through Zendesk API apparently aren't a viable solution, since the html file first of all does not include images, and secondly can't be easily translated to a usable PDF file. 

    0
  • Ryan

    Hi Panu,

    This is the solution I pieced together. We've been using it for over a year in our help center. I hope it helps.

    1. You're going to need a few things to make this work. These can be added to your document head or in head tags on your article page:

    *It would be a good idea to download the DejaVu font family. Kendo isn't fully compatible with many fonts. deja vu will give you the least amount of problems. The code I'm sharing uses these fonts. If you don't want to use them, you'll need to take them out. Download the font family here https://sourceforge.net/projects/dejavu/files/dejavu/2.37/dejavu-fonts-ttf-2.37.zip/download and upload 'DejaVuSans.ttf', 'DejaVuSans-Bold.ttf', 'DejaVuSerif-BoldItalic.ttf', and 'DejaVuSerif-Italic.ttf' to zendesk as assets.
    NOTE: These fonts will not be the default fonts that are visible on your site.

    2. Insert this code right below the body tag on your article page. (any items wrapped in [[ ]] need to be replaced with your custom info and then remove the brackets)

    <script type="x/kendo-template" id="page-template">
    <div class="page-template">
    <div class="header">
    <h1 style="padding-top: 15px;" title="{{article.title}}" class="article-title">{{article.title}}</h1>
    </div>

    <div class="footer">
    Page #:pageNum# <br>[[Custom Footer Text]]
    </div>
    </div>
    </script>
    <style>
    .page-template > * {
    position: absolute;
    left: 30px;
    right: 30px;
    font-family: "DejaVu Sans", sans-serif;
    }
    .page-template .header {
    top: 20px;
    border-bottom: 1px solid #333;
    margin-bottom: 10px
    display: inline-flex;
    }
    .page-template .footer {
    font-size: 10px;
    bottom: 5px;
    border-top: 0px solid #000;
    }
    </style>

    3. Add this code to your article page where you would like the download button to appear.

    <button onclick="ExportPdf();reset();">Download Article</button>

    4. Find the article-body div and add  the id "pdfwrapper" to it

    <div class="article-body" id="pdfwrapper">

    5. Add this code to the end of your article page. When the Download Article button is clicked, the article text will change to the DejaVu font to render the PDF.

    <script>
    kendo.pdf.defineFont({
    "DejaVu Sans":
    "{{asset 'DejaVuSans.ttf'}}",
    "DejaVu Sans|Bold":
    "{{asset 'DejaVuSans-Bold.ttf'}}",
    "DejaVu Sans|Bold|Italic":
    "{{asset 'DejaVuSerif-BoldItalic.ttf'}}",
    "DejaVu Sans|Italic":
    "{{asset 'DejaVuSerif-Italic.ttf'}}"
    });
    </script>
    <script>
    function ExportPdf(){
    document.getElementById("pdfwrapper").style.fontFamily = "DejaVu,sans-serif";
    kendo.drawing
    .drawDOM("#pdfwrapper", {
    paperSize: "A4",
    margin: { top: "31mm", left: "15mm", right: "15mm", bottom: "20mm" },
    scale: 0.7,
    template: $("#page-template").html(),
    keepTogether: ".prevent-split"
    })
    .then(function(group){
    kendo.drawing.pdf.saveAs(group, "[[Your Title Here]].pdf")
    });
    }
    </script>

    Also, add this code to the end of your article page. This will change your text back to your preferred font after one second which gives your pdf enough time to render.

    <script>
    var x = document.getElementById("html-2-pdfwrapper");
    function reset(){
    setTimeout(function(){ x.style.fontFamily = "[[Your Font Here]]"; }, 1000);
    }
    </script>

    6. For some reason this code broke nested bullets and numbers in articles for us. It was a petty simple fix. I just added the below to our CSS file.

    .article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol {
    margin: 0;
    }

    .article-body ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    }

    .article-body ul li:before, .article-body ol ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    }

    .article-body ul li li:before {
    content: "∘";
    position: absolute;
    left: 0;
    }

    .article-body ol li:before, .article-body ul ol li:before {
    content: none;
    }

    7. From your post it looks like article images are important for you. To get them to render you need to make sure they are uploaded and then added to the article. Images that are just pasted in won't render in this solution or any other that I know of.

     

    I know it's a patched-together solution, but it's the best I could do in a pinch when we needed it.. and it's been working for over a year so I haven't had the need to revisit it to make it easier. lol.

    If you have any questions, just post them here and I'll check back.

    Good luck!

    Ryan

    0
  • Brett Bowser
    Zendesk Community Team

    @Ryan thanks for taking the time to share your solution!

    @Panu I just installed the app in my test account but didn't receive an errors. It's worth mentioning that you need to be on Support Team to have access to public apps in the marketplace.

    I've also seen users use the printwhatyoulike Chrome extension that may also work for you.

    0
  • Panu Engelvuori

    Hi, 

    thanks a lot @Ryan for taking the time to describe your hack! I took a look at it, and it seems it is for "printing" pdf:s on single articles? Basically working the same way as printwhatyoulike -extension. Or did I understand correctly (I am not a technical person)? We have like 50 articles, and printing them out one by one is quite a task. Every time we make changes to the help center, we must export PDFs and store them for our Quality Management System. That is why I am looking for an option to get all articles (i.e. the whole help center) printed out at once. 

    @Brett thanks for trying. In Guide I am on Professional plan, and in Support I am on Essential plan. We currently have only one agent (me). 

     

    0
  • DannyC

    Hi Panu,

    Well said! I posted something similar a while back. The same broken 3rd party apps keep getting circulated as solutions from 5+ years ago which is very frustrating.

    Surely we shouldn't have to rely on 3rd party plugins that require us to share our secure zendesk account details. Its just not a plausible solution to what should be a simple feature.

    I've had to manually export 150+ articles using PrintWhatYouLike in chrome which isn't feasible on a regular basis.

    The struggle continues, I will let you know if I have any breakthroughs.

    Danny

     

    0

サインインしてコメントを残してください。

Powered by Zendesk