Qt 5.8 and Pdf.js error

2020-04-30 10:47发布

问题:

I have a problem with pdf.js and Qt 5.8, i tried to do the same code in this link Using pdf.js with Qt5.8 in my application but he doesn't work i dont know why, qt show me this message about JS :

"js: Uncaught TypeError: Cannot read property 'PDFJS' of undefined".

this is my code in mainwindow :

QWebEngineView *view;
QString pdfFileURL;

QString pathToPDFjs = QString("file:///"+qApp->applicationDirPath()+"/libraries/PDF/viewer.html");

pdfFileURL = "file:///C:/Users/Administrateur/Desktop/CV.pdf";

view = new QWebEngineView();
this->setCentralWidget(view);

view->load(QUrl::fromUserInput(pathToPDFjs + QString("?file=") + pdfFileURL));
view->show();

回答1:

I would recommend downloading the source code from here.

Then copy the entire file into a folder within your project (in my case 3rdParty):

.
├── 3rdParty
│   └── pdfjs-1.7.225-dist
│       ├── build
│       │   ├── pdf.js
│       │   └── pdf.worker.js
│       ├── LICENSE
│       └── web
│           ├── cmaps
│           ├── {another files}
│           ├── viewer.css
│           ├── viewer.html
│           └── viewer.js
├── CV.pdf
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
├── mainwindow.ui
└── pdfjsExample.pro

Another recommendation is to create a command in the .pro so you can copy the library to the side of the executable and have no problems of folder location (where CV.pdf is the pdf that I use to do the test).

COPY_CONFIG = 3rdParty CV.pdf
copy_cmd.input = COPY_CONFIG
copy_cmd.output = ${QMAKE_FILE_IN_BASE}${QMAKE_FILE_EXT}
copy_cmd.commands = $$QMAKE_COPY_DIR ${QMAKE_FILE_IN} ${QMAKE_FILE_OUT}
copy_cmd.CONFIG += no_link_no_clean
copy_cmd.variable_out = PRE_TARGETDEPS
QMAKE_EXTRA_COMPILERS += copy_cmd

And the code would look like this:

QWebEngineView *view;
QString pdfFileURL;

QString pathToPDFjs = QString("file:///%1/%2")
        .arg(QDir::currentPath())
        .arg("3rdParty/pdfjs-1.7.225-dist/web/viewer.html");

pdfFileURL = QString("file:///%1/%2").arg(QDir::currentPath()).arg("CV.pdf");

view = new QWebEngineView();
setCentralWidget(view);

QUrl url = QUrl::fromUserInput(pathToPDFjs + QString("?file=") + pdfFileURL);

view->load(url);

NOTE: modify applicationDirPath to CurrentPath so that if I move the executable to another location I did not generate problems, for the application to work correctly the 3rdParty folder and our executable must be together.

The complete code is here.

If you want to hide the print button and the open button, you should comment the following lines:

viewer.html [line 178]

<!--button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
  <span data-l10n-id="open_file_label">Open</span>
</button>

<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
  <span data-l10n-id="print_label">Print</span>
</button-->

viewer.js [line 3058]

  /*items.openFile.addEventListener('click', function (e) {
    eventBus.dispatch('openfile');
  });
  items.print.addEventListener('click', function (e) {
   eventBus.dispatch('print');
  });*/