ng2-pdf-viewer: get coordinates of highlighted text











up vote
0
down vote

favorite












I'm working on porting an experimental AngularJS app to Angular 4.



One of the key features of the app is the ability for a user to highlight text from the PDF and to get coordinates corresponding to their selection in return (a PDF is a 595x842 pixel rectangle, to keep things simple, assume the user can only select a single line of text and we return the bottom-left most corner of the selection)



In order to do this, the AngularJS app used the first function which can be found in the response here How do I retrieve text from user selection in pdf.js? and it worked perfectly. More precisely our code was



function getHightlightCoords() {
var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageRect = page.canvas.getClientRects()[0];
var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
var selectionRect = selectionRects[0]; //only care about one line, maybe forbid multi line
var viewport = page.viewport;
var leftAndBot = viewport.convertToPdfPoint(selectionRect.left - pageRect.x, selectionRect.top - pageRect.y);
return leftAndBot
}


I've been trying to reproduce this behavior with the ng2-pdf-viewer package (I couldn't get pdf.js to provide searchable text with Angular 4), here's some boilerplate code to quickly get ng2-pdf-viewer working https://stackblitz.com/edit/ng2-pdf-viewer



I've been browsing the source code for a couple of hours looking for some kind of callback I could fetch coordinates from, but so far I haven't found any high level function doing this.



Has anyone ever encountered this challenge and found a way to solve it? Is this feature just not provided by this module?










share|improve this question


























    up vote
    0
    down vote

    favorite












    I'm working on porting an experimental AngularJS app to Angular 4.



    One of the key features of the app is the ability for a user to highlight text from the PDF and to get coordinates corresponding to their selection in return (a PDF is a 595x842 pixel rectangle, to keep things simple, assume the user can only select a single line of text and we return the bottom-left most corner of the selection)



    In order to do this, the AngularJS app used the first function which can be found in the response here How do I retrieve text from user selection in pdf.js? and it worked perfectly. More precisely our code was



    function getHightlightCoords() {
    var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
    var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
    var pageRect = page.canvas.getClientRects()[0];
    var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
    var selectionRect = selectionRects[0]; //only care about one line, maybe forbid multi line
    var viewport = page.viewport;
    var leftAndBot = viewport.convertToPdfPoint(selectionRect.left - pageRect.x, selectionRect.top - pageRect.y);
    return leftAndBot
    }


    I've been trying to reproduce this behavior with the ng2-pdf-viewer package (I couldn't get pdf.js to provide searchable text with Angular 4), here's some boilerplate code to quickly get ng2-pdf-viewer working https://stackblitz.com/edit/ng2-pdf-viewer



    I've been browsing the source code for a couple of hours looking for some kind of callback I could fetch coordinates from, but so far I haven't found any high level function doing this.



    Has anyone ever encountered this challenge and found a way to solve it? Is this feature just not provided by this module?










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I'm working on porting an experimental AngularJS app to Angular 4.



      One of the key features of the app is the ability for a user to highlight text from the PDF and to get coordinates corresponding to their selection in return (a PDF is a 595x842 pixel rectangle, to keep things simple, assume the user can only select a single line of text and we return the bottom-left most corner of the selection)



      In order to do this, the AngularJS app used the first function which can be found in the response here How do I retrieve text from user selection in pdf.js? and it worked perfectly. More precisely our code was



      function getHightlightCoords() {
      var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
      var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
      var pageRect = page.canvas.getClientRects()[0];
      var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
      var selectionRect = selectionRects[0]; //only care about one line, maybe forbid multi line
      var viewport = page.viewport;
      var leftAndBot = viewport.convertToPdfPoint(selectionRect.left - pageRect.x, selectionRect.top - pageRect.y);
      return leftAndBot
      }


      I've been trying to reproduce this behavior with the ng2-pdf-viewer package (I couldn't get pdf.js to provide searchable text with Angular 4), here's some boilerplate code to quickly get ng2-pdf-viewer working https://stackblitz.com/edit/ng2-pdf-viewer



      I've been browsing the source code for a couple of hours looking for some kind of callback I could fetch coordinates from, but so far I haven't found any high level function doing this.



      Has anyone ever encountered this challenge and found a way to solve it? Is this feature just not provided by this module?










      share|improve this question













      I'm working on porting an experimental AngularJS app to Angular 4.



      One of the key features of the app is the ability for a user to highlight text from the PDF and to get coordinates corresponding to their selection in return (a PDF is a 595x842 pixel rectangle, to keep things simple, assume the user can only select a single line of text and we return the bottom-left most corner of the selection)



      In order to do this, the AngularJS app used the first function which can be found in the response here How do I retrieve text from user selection in pdf.js? and it worked perfectly. More precisely our code was



      function getHightlightCoords() {
      var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
      var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
      var pageRect = page.canvas.getClientRects()[0];
      var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
      var selectionRect = selectionRects[0]; //only care about one line, maybe forbid multi line
      var viewport = page.viewport;
      var leftAndBot = viewport.convertToPdfPoint(selectionRect.left - pageRect.x, selectionRect.top - pageRect.y);
      return leftAndBot
      }


      I've been trying to reproduce this behavior with the ng2-pdf-viewer package (I couldn't get pdf.js to provide searchable text with Angular 4), here's some boilerplate code to quickly get ng2-pdf-viewer working https://stackblitz.com/edit/ng2-pdf-viewer



      I've been browsing the source code for a couple of hours looking for some kind of callback I could fetch coordinates from, but so far I haven't found any high level function doing this.



      Has anyone ever encountered this challenge and found a way to solve it? Is this feature just not provided by this module?







      angular pdf






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 19 at 16:59









      Skum

      18310




      18310
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          I ended up working directly with the textLayer that is rendered on top of the PDF on the webpage rather than with the library itself.



          I resized the pdf container to have size 595x842 with



          <div class="pdf-container">
          <pdf-viewer [src]="src"
          [zoom]="0.75">
          </pdf-viewer>


          Then I added the following function



          public onClick(){
          const textLayer = document.getElementsByClassName('TextLayer');
          const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
          const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
          }


          As you can probably guess from the function name, I call this function with the click of a button, but of course you can call it however you like (as long as the PDF has been rendered)



          Note that because of the way the text layer is rendered with PDF.JS, the coordinates of your selection may be a few pixels off the actual coordinates on the PDF of what you selected. Not much I can do about that with this approach. I will approve a new answer if somebody comes up with a better alternative.






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379410%2fng2-pdf-viewer-get-coordinates-of-highlighted-text%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote



            accepted










            I ended up working directly with the textLayer that is rendered on top of the PDF on the webpage rather than with the library itself.



            I resized the pdf container to have size 595x842 with



            <div class="pdf-container">
            <pdf-viewer [src]="src"
            [zoom]="0.75">
            </pdf-viewer>


            Then I added the following function



            public onClick(){
            const textLayer = document.getElementsByClassName('TextLayer');
            const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
            const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
            }


            As you can probably guess from the function name, I call this function with the click of a button, but of course you can call it however you like (as long as the PDF has been rendered)



            Note that because of the way the text layer is rendered with PDF.JS, the coordinates of your selection may be a few pixels off the actual coordinates on the PDF of what you selected. Not much I can do about that with this approach. I will approve a new answer if somebody comes up with a better alternative.






            share|improve this answer



























              up vote
              0
              down vote



              accepted










              I ended up working directly with the textLayer that is rendered on top of the PDF on the webpage rather than with the library itself.



              I resized the pdf container to have size 595x842 with



              <div class="pdf-container">
              <pdf-viewer [src]="src"
              [zoom]="0.75">
              </pdf-viewer>


              Then I added the following function



              public onClick(){
              const textLayer = document.getElementsByClassName('TextLayer');
              const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
              const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
              }


              As you can probably guess from the function name, I call this function with the click of a button, but of course you can call it however you like (as long as the PDF has been rendered)



              Note that because of the way the text layer is rendered with PDF.JS, the coordinates of your selection may be a few pixels off the actual coordinates on the PDF of what you selected. Not much I can do about that with this approach. I will approve a new answer if somebody comes up with a better alternative.






              share|improve this answer

























                up vote
                0
                down vote



                accepted







                up vote
                0
                down vote



                accepted






                I ended up working directly with the textLayer that is rendered on top of the PDF on the webpage rather than with the library itself.



                I resized the pdf container to have size 595x842 with



                <div class="pdf-container">
                <pdf-viewer [src]="src"
                [zoom]="0.75">
                </pdf-viewer>


                Then I added the following function



                public onClick(){
                const textLayer = document.getElementsByClassName('TextLayer');
                const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
                const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
                }


                As you can probably guess from the function name, I call this function with the click of a button, but of course you can call it however you like (as long as the PDF has been rendered)



                Note that because of the way the text layer is rendered with PDF.JS, the coordinates of your selection may be a few pixels off the actual coordinates on the PDF of what you selected. Not much I can do about that with this approach. I will approve a new answer if somebody comes up with a better alternative.






                share|improve this answer














                I ended up working directly with the textLayer that is rendered on top of the PDF on the webpage rather than with the library itself.



                I resized the pdf container to have size 595x842 with



                <div class="pdf-container">
                <pdf-viewer [src]="src"
                [zoom]="0.75">
                </pdf-viewer>


                Then I added the following function



                public onClick(){
                const textLayer = document.getElementsByClassName('TextLayer');
                const x = window.getSelection().getRangeAt(0).getClientRects()[0].left - textLayer[0].getBoundingClientRect().left;
                const y = window.getSelection().getRangeAt(0).getClientRects()[0].top - textLayer[0].getBoundingClientRect().top;
                }


                As you can probably guess from the function name, I call this function with the click of a button, but of course you can call it however you like (as long as the PDF has been rendered)



                Note that because of the way the text layer is rendered with PDF.JS, the coordinates of your selection may be a few pixels off the actual coordinates on the PDF of what you selected. Not much I can do about that with this approach. I will approve a new answer if somebody comes up with a better alternative.







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 23 at 10:10

























                answered Nov 23 at 10:00









                Skum

                18310




                18310






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379410%2fng2-pdf-viewer-get-coordinates-of-highlighted-text%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    404 Error Contact Form 7 ajax form submitting

                    How to know if a Active Directory user can login interactively

                    TypeError: fit_transform() missing 1 required positional argument: 'X'