1

I am a beginner in HTML/CSS and don't know any javascript, but I can understand other peoples' code. I am working on my portfolio website, and want to embed my resume in the page, like GitHub does:

GitHub example

I guess I need the dimensions of the PDF so that I can write them in the iframe/embed tag. How can it be done?

Is there any other alternative?

I saw the source code and there was a canvas element after iframe. I guess some script on GitHub takes a snapshot of the PDF and then displays it using canvas tag.
Resume is stored at a GitHub Repository.

Link to the resume page: https://github.com/ad1tyawagh/resume/blob/master/aditya_resume.pdf

Sorry if my question is not clear. This is my first time posting a query on Stack Overflow.

Aditya Wagh
  • 182
  • 1
  • 2
  • 14
  • https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html – David Dec 15 '19 at 21:07
  • Hi David! That is one of the ways to do it, but I just want the snapshot of the resume, and not the scrollbars and the background. – Aditya Wagh Dec 15 '19 at 21:39
  • Github is using the `canvas` element. That's a little more advanced. For your needs, just grab a screengrab of it then add it as an image :-) – David Dec 15 '19 at 21:43
  • I think I can also use `LaTeX` to also generate a png image along with the pdf. Yea that would be good. I can just use the image tag then! – Aditya Wagh Dec 15 '19 at 21:47

2 Answers2

1

David's comment might be the best approach: to host the actual PDF and serve it as is.

However, you are describing a PDF conversion to image on server side before serving it.

To accomplish this, you might make good use of straight forward imagemagick convert: 

convert input.pdf -quality 100 output.png

Then, size manipulation, direct hosting or canvas printing is up to you.

fde-capu
  • 205
  • 1
  • 4
  • 14
0

I was able to do what I intended. Leaving it here for others. I got it to work in the following way: 

<!DOCTYPE html>
<html lang="en">

{% include head.html %}
<body>
    <a href="https://raw.githubusercontent.com/ad1tyawagh/resume/master/aditya_resume.pdf" title="Click to download the CV">
        <canvas class="container box-shadow shadow bg-white rounded" id="cv" style="width: 100%;
        height: auto;"></canvas>
        <!-- Use latest PDF.js build from Github -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js"></script>

        <script type="text/javascript">
             <!----Insert the script following this block here---->
        </script>
    </a>
</body>
{% include footer.html %}
</html>

           var url = ""; // url of the pdf here
            var pdf = null;
            pdfjsLib.disableWorker = true;
            var pages = new Array();
            //Prepare some things
            var canvas = document.getElementById('cv');
            var context = canvas.getContext('2d');
            var scale = 5;
            var canvasWidth = 0;
            var canvasHeight = 0;
            var pageStarts = new Array();
            pageStarts[0] = 0;

            pdfjsLib.getDocument(url).then(function getPdfHelloWorld(_pdf) {
                pdf = _pdf;
                //Render all the pages on a single canvas
                for (var i = 1; i <= pdf.numPages; i++) {
                    pdf.getPage(i).then(function getPage(page) {
                        var viewport = page.getViewport(scale);
                        // changing canvas.width and/or canvas.height auto-clears the canvas
                        canvas.width = viewport.width;
                        canvas.height = viewport.height;
                        page.render({ canvasContext: context, viewport: viewport });
                        pages[i - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
                        // calculate the width of the final display canvas
                        if (canvas.width > maxCanvasWidth) {
                            maxCanvasWidth = canvas.width;
                        }
                        // calculate the accumulated with of the final display canvas
                        canvasHeight += canvas.height;
                        // save the "Y" starting position of this pages[i]
                        pageStarts[i] = pageStarts[i - 1] + canvas.height;
                        p.Out("pre-rendered page " + i);
                    });
                }


                canvas.width = canvasWidth;
                canvas.height = canvasHeight;  // this auto-clears all canvas contents
                for (var i = 0; i < pages.length; i++) {
                    context.putImageData(pages[i], 0, pageStarts[i]);
                }

            });
Aditya Wagh
  • 182
  • 1
  • 2
  • 14