Recent searches


No recent searches

Download button on Guide Article

Answered


Posted Oct 31, 2023

Hi all,

I am not sure if this has been already been discussed somewhere on other topics and I am apologizing in advance for not being able to find anything, I am wondering if I can create a download button on a Zendesk Article.

Could you please provide with any suggestion?

Thanks in advance.

Regards


0

2

2 comments

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Leo Lenk,

Welcome to the Zendesk Community!  :)

 Credit: https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library   

 

You can try this; you can just open your article_page.hbs file and add the given code as it is.

 

<style>
           img{width:70%;}
          </style>
          <a href="javascript:demoFromHTML()" class="button">Run Code</a>
 <script>
 function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#article-body')[0];
  // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },
   function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
 </script>




Note: id="article-body" -- add this to your article-body div

Screenshot for the same:


 

Try and if any issue feel free to ask.

Thanks

 

 

0


Hi Ifra Saqlain,

Thanks for you quick response regarding this matter and sorry for not getting back at you with the same promptness.

I will try out your suggestion right away and will let you know about the outcome.

Kind Regards

Leonardo Lenk

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post