実現したいこと
現在、vue3-pdf-appを使用してpdfビューワーの実装をおこなっているのですが、画像の位置にあるカスタムツールバーをビューワー下部に配置したいです。
発生している問題・分からないこと
公式ドキュメント(github)には、以下のように書かれており、
:id-config
Description: If default toolbar UI doesn't suit you it is possible to build custom toolbar. The prop contains elements ID to which to bind functionality. If element ID is specified in this prop appropriate button will be hidden in a default toolbar. May not work with UI framework components. That is because pdfjs internally manages attributes specific to a certain HTML element (for instance pdfjs toggles disabled attribute of a button but it won't if a div is used instead of a button). So it is better to use native HTML element specified as recommended in ID config specification below. Four slots are specially designed to build custom toolbar (are situated near a pdf page): viewer-header, viewer-prepend, viewer-append, viewer-footer (refer slots API). It is also possible to use other slots or elements outside vue-pdf-app.
Type: ID config (see below)
Required: false
Usage:
Vue.js
1> <template> 2> <div> 3> <button :id="idConfig.zoomOut" type="button">Zoom out</button> 4> <vue-pdf-app :id-config="idConfig"> 5> <template #viewer-prepend> 6> <div class="viewer-prepend"> 7> <button :id="idConfig.zoomIn" type="button">Zoom in</button> 8> </div> 9> </template> 10> </vue-pdf-app> 11> </div> 12> </template> 13> <script> 14> export default { 15> data() { 16> return { 17> idConfig: { zoomIn: "zoomInId", zoomOut: "zoomOutId" } 18> }; 19> } 20> }; 21> </script>
のように書かれていたので、viewew-prependとなっていた箇所をviewer-footerに変更してカスタムツールバーがビューワー下部に表示されるようになるのかと期待したのですが最初の画像の通り上部に存在したままになっており、解決策がわかりません。
該当のソースコード
Vue
1<template> 2 <div class="pdf-container"> 3 <button @click="openInNewTab">別タブで開く 4 <span><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg></span> 5 </button> 6 7 <vue-pdf-app :pdf="pdfFile" :id-config="idConfig"> 8 <template #viewer-footer> 9 <div class="viewer-footer"> 10 <div class="custom-toolbar"> 11 <button :id="idConfig.previousPage"> 12 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z"/></svg> 13 </button> 14 <button :id="idConfig.nextPage"> 15 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg> 16 </button> 17 <div class="page-number"> 18 <input type="number" :id="idConfig.pageNumber" style="width: 40px;"> 19 <span :id="idConfig.numPages"></span> 20 </div> 21 <button :id="idConfig.zoomIn"> 22 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg> 23 </button> 24 <button :id="idConfig.pageRotateCw"> 25 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T80-440q0-150 105-255t255-105h6l-62-62 56-58 160 160-160 160-56-58 62-62h-6q-117 0-198.5 81.5T160-440q0 117 81.5 198.5T440-160q35 0 69-8.5t65-25.5l58 58q-43 28-92 42T440-80Zm240-120L440-440l240-240 240 240-240 240Zm0-114 126-126-126-126-126 126 126 126Zm0-126Z"/></svg> 26 </button> 27 <button :id="idConfig.zoomOut"> 28 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg> 29 </button> 30 </div> 31 </div> 32 </template> 33 </vue-pdf-app> 34 </div> 35</template> 36 37<script> 38 import VuePdfApp from "vue3-pdf-app"; 39 import pdfFile from '../../assets/test.pdf'; 40 import "vue3-pdf-app/dist/icons/main.css"; 41 42 export default { 43 components: { 44 VuePdfApp 45 }, 46 data() { 47 return { 48 pdfFile, 49 idConfig: { 50 zoomIn: "customZoomIn", 51 zoomOut: "customZoomOut", 52 pageRotateCw: "customRotateCw", 53 previousPage: "customPrevPage", 54 nextPage: "customNextPage", 55 numPages: "customNumPages", 56 pageNumber: "customPageNumber", 57 } 58 }; 59 }, 60 methods: { 61 openInNewTab() { 62 const url = this.pdfFile; // PDFファイルのURLを指定 63 window.open(url, '_blank'); 64 } 65 } 66 }; 67</script> 68 69 70 <style> 71 .pdf-container { 72 /* PDFビューワーのサイズを400px * 400pxに設定 */ 73 height: 400px; 74 width: 400px; 75 overflow: hidden; /* PDFの内容がコンテナを超える場合にスクロールバーを表示 */ 76 } 77 #viewerContainer { 78 background-color: grey; 79 } 80 #vuePdfApp { 81 background-color: grey; 82 } 83 .toolbar { 84 display: none; 85 } 86 .custom-toolbar { 87 display: flex; 88 gap: 20px; 89 border-radius: 10px; 90 border: solid 1px black; 91 background-color: white; 92 justify-content: center; 93 } 94 </style> 95
試したこと・調べたこと
上記の詳細・結果
viewer-header: slot before viewer-prepend slot. Can be used to build custom toolbar.
viewer-prepend: slot before viewerContainer div. Can be used to build custom toolbar.
viewer-append: slot after viewerContainer div. Can be used to build custom toolbar.
viewer-footer: slot after viewer-append slot. Can be used to build custom toolbar.
公式ドキュメントには、これら4種のスロットが用意されているらしいので全て試してみましたがビューワー上部にカスタムツールバーが固定されたままでした。
補足
特になし
0 コメント