使用ClojureScript+Hiccup在网页展示PDF失败，求解决方法

1. 先排查PDF文件路径是否正确 #

• 确认demo.pdf的位置是否和编译后的JS文件在同一目录，或者使用正确的相对/绝对路径。比如文件放在项目public目录下时，路径要写成"/demo.pdf"（开头加斜杠）。
• 打开浏览器开发者工具的Network面板，查看PDF文件的请求状态：如果是404，说明路径错误，调整路径即可；如果是200但仍不显示，再排查其他原因。
• 直接在浏览器地址栏输入PDF的完整URL，确认文件本身能正常打开，排除文件损坏的问题。

2. 检查浏览器PDF预览支持 #

部分浏览器可能默认禁用了内置PDF查看器：

• 比如Chrome中，打开chrome://settings/content/pdfDocuments，确保“下载PDF文件而不是在Chrome中自动打开它们”未勾选。
• 若使用Firefox，检查设置里的PDF查看器是否启用。

3. 优化Hiccup标签写法 #

给标签添加 fallback 内容，方便排查浏览器兼容性问题：

• object标签写法：

[:object {:data "/demo.pdf"
          :type "application/pdf"
          :width "500px"
          :height "400px"}
 [:p "您的浏览器不支持PDF预览，请下载查看："
  [:a {:href "/demo.pdf"} "下载demo.pdf"]]]

• embed标签写法：

[:embed {:src "/demo.pdf"
         :type "application/pdf"
         :width "500px"
         :height "400px"}]

注意：部分浏览器对embed的支持不如object，优先用object测试。

4. 备选方案：用PDF.js实现稳定预览 #

如果上述方法都无效，用Mozilla开源的PDF.js来渲染PDF，兼容性更强：

1. 先通过npm安装依赖：npm install pdfjs-dist
2. ClojureScript代码示例：

(ns your.app.module
  (:require ["pdfjs-dist/build/pdf" :as pdfjs]
            ["pdfjs-dist/build/pdf.worker" :as pdf-worker]))

;; 设置PDF worker路径
(set! pdfjs/GlobalWorkerOptions.workerSrc (js/require "pdfjs-dist/build/pdf.worker.entry"))

;; 渲染PDF的函数
(defn render-pdf []
  (-> (pdfjs/getDocument "/demo.pdf")
      (.promise)
      (.then (fn [pdf]
               (.getPage pdf 1)
               (.then (fn [page]
                        (let [canvas (.getElementById js/document "pdf-canvas")
                              ctx (.getContext canvas "2d")
                              viewport (.getViewport page #js {:scale 1.2})]
                          (set! (.-width canvas) (.-width viewport))
                          (set! (.-height canvas) (.-height viewport))
                          (.render page #js {:canvasContext ctx :viewport viewport}))))))))

;; Hiccup部分渲染canvas容器
[:div {:style {:width "500px" :height "400px"}}
 [:canvas#pdf-canvas]]

在组件挂载完成后调用render-pdf函数即可。

内容的提问来源于stack exchange，提问作者niloofar