search

TeamMaestro / pdf-viewer

PDF viewer web component built in StencilJS. Reusable in Angular, Ionic, React, Vue.JS, etc.
MIT License
76 stars 12 forks source link

'hive-pdf-viewer' is not a known element: #12

Closed qwerqwermhc closed 5 years ago

qwerqwermhc commented 5 years ago

[Angular] 'hive-pdf-viewer' is not a known element:

  1. If 'hive-pdf-viewer' is an Angular component, then verify that it is part of this module.
  2. If 'hive-pdf-viewer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
qwerqwermhc commented 5 years ago

Can you do an ionic3 example? I read the documentation according to the above operation or not. Can you come to a small code for us to visit?

qwerqwermhc commented 5 years ago
  1. npm i @teamhive/stencil-pdf-viewer 2.import '@teamhive/stencil-pdf-viewer/dist/pdfviewer'; I didn't understand the third part. I can build a small project. I can achieve it in ionic3 or 4. Let me see the effect? I read the documentation for this plugin is not very comprehensive or you can send me a mailbox to do a small ionic3 or 4 sample can you? Thank you very much.
qwerqwermhc commented 5 years ago

https://github.com/VadimDez/ng2-pdf-viewer This conditioning is very clear but he does not support the file now. I can't access it with this plugin.

sean-perkins commented 5 years ago

These are non-issues to the plugin. Please use stack overflow or another medium for receiving help on web component implementations.

When using any stencil web component you need to add the CUSTOM_ELEMENTS_SCHEMA to the schemas declaration of your modules (for Angular).

There's no need to do framework specific examples, StencilJS documents integration paths: https://stenciljs.com/docs/framework-integration

qwerqwermhc commented 5 years ago

Thank you very much for doing what you said but it does not support local files.

Fetch API cannot load file:///D:/pdftest/HGH-18123.pdf. URL scheme must be "http" or "https" for CORS request. hive-pdf-viewer.js:80831 Unhandled promise rejection DOMException: Failed to execute 'postMessage' on 'Worker': TypeError: Failed to fetch could not be cloned. at MessageHandler.postMessage (http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:58560:19) at sendStreamRequest (http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:58377:14) at Object.error (http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:58420:9) at http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:66191:18 at run (http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:80796:22) at http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:80813:30 at MutationObserver.flush (http://localhost:8100/build/pdfviewer/hive-pdf-viewer.js:80601:9) at t.invoke (http://localhost:8100/build/polyfills.js:3:9283) at r.runGuarded (http://localhost:8100/build/polyfills.js:3:4655) at MutationObserver. (http://localhost:8100/build/polyfills.js:3:4267)

sean-perkins commented 5 years ago
  1. The example is using local files.
  2. We use the plugin with our Ionic 4 Capacitor app that has offline files and it works.

Your issues is CORS, not the plugin. Security rules are preventing you from accessing the file. Either serve the file from a local server and access through a valid http/https schema or disable security rules for your device/browser (not recommended).

qwerqwermhc commented 5 years ago

I know that when I use the form ../../assets/conf/_archive/HGH-18123.pdf, he can do it but when I use the file: /// D:/pdftest/HGH-18123.pdf It can't be done. You can access the files in a folder under a certain drive letter on your computer. The file starts with the file:///.