This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-04-27
Channels
- # announcements (9)
- # aws (1)
- # aws-lambda (12)
- # babashka (18)
- # beginners (37)
- # calva (27)
- # clerk (15)
- # clojure (16)
- # clojure-conj (13)
- # clojure-europe (44)
- # clojure-germany (3)
- # clojure-norway (27)
- # clojure-uk (1)
- # cursive (6)
- # data-science (24)
- # datahike (7)
- # datomic (40)
- # fulcro (5)
- # hoplon (33)
- # hyperfiddle (9)
- # introduce-yourself (6)
- # jobs (1)
- # lsp (22)
- # nbb (2)
- # off-topic (15)
- # pathom (37)
- # pedestal (3)
- # polylith (7)
- # portal (1)
- # re-frame (7)
- # releases (1)
- # remote-jobs (1)
- # rewrite-clj (6)
- # sci (1)
- # scittle (1)
- # xtdb (7)
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
Can you be more specific on the issue you’re having with it?
See the book on using vanilla js React component, and also shadow-cljs docs on pulling in NPM libs.
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
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!