Highlight content within PDF rendered through PDFTron

Technical Support WebViewer
, , , ,
1

WebViewer Version:

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? Yes
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
(Think of this as an email subject)
How to highlight a text on a PDF rendered through PDFTron

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Hello,

We are using Playwright automation framework for testing one of our use cases.
The use case is to highlight certain text within a rendered PDF and click a button.
The PDF is rendered within an iframe:

image
image2660×490 135 KB

Could you please let me know if there is a way to highlight a certain text within rendered PDF ?

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hi wishnoosivadas,

You can retrieve the text position first, which will return an array of Quads, and then programmatically create a text highlight annotation using these Quads. Please find below documentation:

Hope this helps!

Regards,
Maggie V.

1 Like
3

Do you have a sample Playwright test which imports the WebViewer and does any of the above ?

1 Like
5

Hi wishnoosivadas,

Here is a similar post to get you started about testing

If you plan to test the UI, we use Storybook and Playwright, which can be found in our public repo https://github.com/PDFTron/webviewer-ui.

Regards,
Maggie V.

1 Like
6

Here is the Playwright code I am using. Can someone help with below error?

image
image1866×394 40.5 KB 

import WebViewer, { WebViewerInstance, WebViewerOptions } from "@pdftron/webviewer"

test.only('WebViewer Test', async() => {
    page = await context.newPage();
    await loginPage.loginUser(page, context, Environment.userEmail, Environment.userPwd)
    await fundsPage.goToFundDocs(page)
    await page.getByRole('button', { name: 'LPA Side Letter' }).click()
    await page.getByRole('button', { name: 'Create Obligation' }).click()
    const pdfFrame = await page.frameLocator('[title="PDF Viewer"]')
    await expect(pdfFrame.locator('div#pageContainer1')).toBeVisible({timeout: 10000})	

    const instance = await setupInstance()
    const doc = await instance.Core.documentViewer.getDocument().getPDFDoc()
    const page = await doc.getPage(1)
    const txt = await instance.Core.PDFNet.TextExtractor.create()
    const line = await txt.getFirstLine()
    console.log(line)
})

async function setupInstance() {
  const options = {
    filename: "LPASideLetter.pdf",
    fullAPI: true,
    initialDoc: '../Fixtures/LPASideLetter.pdf',
    loadAsPDF: true,
    path: '../../../node_modules/@pdftron/webviewer/public'
  };
  const viewerElement = document.querySelector('#viewer')
  const instance = await WebViewer(options, viewerElement);

  return instance;
}
1 Like
7

Hello,

I am blocked on this. Can someone help me out ? Thanks !

1 Like
8

Hi wishnoosivadas,

Apologies for the delay.

Not sure if that’s how you retrieve WebViewer instance in playwright tests. For us, we’re getting it through window.instance.

Please check out this post for more information about mocking WebViewer in testing.

Regards,
Maggie V.

1 Like