Vue

Vueアプリで、ファイル入力やドロップゾーンに属性を1つ追加するだけで、PDFや写真をアップロード前に縮小できます。

index.html でスクリプトを1回読み込み、inputまたはドロップゾーンに属性を追加します。ハンドラーは縮小後のファイルを受け取ります。

index.html

<script src="https://pdfkind.com/embed.js" defer></script>

ファイル入力

Vue

<template>
  <input type="file" data-pdfkind-max="5MB" @change="onFile" />
</template>

<script setup>
function onFile(e) {
  upload(e.target.files[0])   // 縮小後のファイル
}
</script>

ドロップゾーン

Vue

<div data-pdfkind-max="5MB" @dragover.prevent @drop.prevent="onDrop">
  ここにドキュメントをドロップ
</div>

<script setup>
function onDrop(e) {
  upload(e.dataTransfer.files[0])
}
</script>

細かく制御したい場合は PDFkind.fit() を使用してください。

前へReact 次へ Angular

最終更新日：2026年11月3日 · お問い合わせ：contact@pdfkind.com