Fork me on GitHub
#fulcro
<
2023-04-27
>
Harry07:04:22

Hi, I am trying to use pdf.js within Fulcro but I am having some trouble. Was wondering if anyone knew of any examples that incorporate it? Cheers

Quentin Le Guennec11:04:46

Can you be more specific on the issue you’re having with it?

tony.kay16:04:44

See the book on using vanilla js React component, and also shadow-cljs docs on pulling in NPM libs.

Harry07:04:20

Unfortunately the NPM lib does not work https://clojurians-log.clojureverse.org/shadow-cljs/2022-11-04 I am trying to pull it in via CDNJS. There is this demo that I am trying to work of: https://github.com/thheller/reagent-pdfjs/blob/master/src/main/demo/app.cljs Was just wondering if an example existed but all good I will keep trying to get it to work. Thanks

Harry11:05:30

I have got the following to load the module into the demo rad setup: (def ^js pdfjs (gobj/get js/window "pdfjs-dist/build/pdf")) (defsc PDFCanvas [this props] {:query [:pdf-canvas/id] ; normal Fulcro component options :ident :pdf-canvas/id :use-hooks? true} ;; ref (set! (.. pdfjs -GlobalWorkerOptions -workerSrc) "") (let [canvas-ref (hook/use-ref nil)] ;; initialize and attach pdfjs when the canvas is mounted (hook/use-effect (fn [] (-> (. pdfjs getDocument "test.pdf") (.-promise) (.then (fn [^js pdf] (js/console.log "pdf loaded") (. pdf getPage 1))) (.then (fn [^js page] (js/console.log "page" page) (let [viewport (.getViewport page #js {:scale 1.5}) canvas (.-current canvas-ref) context (.getContext canvas "2d") render-context #js {:canvasContext context :viewport viewport}] (set! canvas -height (.-height viewport)) (set! canvas -width (.-width viewport)) (-> (.render page render-context) (.-promise) (.then (fn [] (js/console.log "Page rendered.")))))))) (fn [] (js/console.log "cleanup")))) [:canvas {:ref canvas-ref}])) (def ui-pdf-canvas (comp/factory PDFCanvas {:keyfn :pdf-canvas/id})) (defsc PDF [this {:keys [pdf-canvas]}] {:query [{:pdf-canvas (comp/get-query PDFCanvas)}] :initial-state (fn [params] {:ui/react-key "P" :child (comp/get-initial-state PDFCanvas nil)}) :ident (fn [props] [:component/id ::PDF]) :route-segment ["pdf"]} (ui-pdf-canvas pdf-canvas)) (def ui-pdf (comp/factory PDF)) But running into some errors. I am not sure I am passing it back correctly? Any pointers would be great!