고급 — SDK 직접 삽입

뷰어 SDK를 고객사 페이지에 직접 로드하는 방식입니다. iframe 안 DOM을 직접 조작해야 하는 경우에만 사용하세요.

서버 헤더 (필수)

페이지를 내려주는 서버가 아래 두 헤더를 반드시 설정해야 합니다. 없으면 requested a shared WebAssembly.Memory but the returned buffer is not a SharedArrayBuffer 오류가 납니다.

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: credentialless

nginx

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "credentialless" always;

Apache

Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "credentialless"

Spring (Servlet Filter)

response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
response.setHeader("Cross-Origin-Embedder-Policy", "credentialless");

Express

app.use((req, res, next) => {
  res.set("Cross-Origin-Opener-Policy", "same-origin");
  res.set("Cross-Origin-Embedder-Policy", "credentialless");
  next();
});

IIS (web.config)

<httpProtocol><customHeaders>
  <add name="Cross-Origin-Opener-Policy" value="same-origin" />
  <add name="Cross-Origin-Embedder-Policy" value="credentialless" />
</customHeaders></httpProtocol>

SDK 로드와 뷰어 생성

viewer.open()은 URL이 아니라 ArrayBuffer를 받습니다.

<script src="https://cdn.dragdocs.com/crepas-viewer@2.1.0/dist/crepas-viewer.min.js?clientId=XXXX-XXXX-XXXX-XXXX-XXXX"></script>
<script>
  const CrepasViewer = window.CrepasViewer?.create ? window.CrepasViewer : window.CrepasViewer?.default;
  const viewer = CrepasViewer.create(document.getElementById("viewer"), { theme: "light", officeViewer: { mode: "standard" } });
  const buffer = await (await fetch("/api/documents/123/content")).arrayBuffer();
  await viewer.open(buffer, "계약서.pdf", "application/pdf");
</script>