投稿したPDFのサイズを指定したい

Question

□解決したいこと

現在、投稿機能をもったアプリを作成しております。

その中で、pdfの投稿を実装したのですが、トップページ上のビューで以下の問題が発生しております。

・投稿したpdfのwidth、heightが指定できない

・overflowが自動で設定されている。

以上の問題を解決し、結果として

・max-width : 250px;

・max-height : 250px;

・overflow なし

とし枠の中におさめたいと思っております。

なぜこのような挙動をするのかわからないので、アドバイスをいただきたくお願い申し上げます。

ページの挙動のGIF

https://gyazo.com/bdd06fa4e5bca60e7c1e85e0bfbb0e1f

問題となる部分のコード

html .erb

<object data="<%=url_for(f.image)%>" type="application/pdf"  max-width=250px" max-height="250px" ></object>

□仮説及び調べたこと

とりあえずですが、枠の中に納めようと思い styleにresize:both;を指定しました。

<object data="<%=url_for(f.image)%>" type="application/pdf"  max-width=250px" max-height="250px" style="resize:both;" ></object>

しかし結果は変わりませんでした。

他に原因等、心当たりのある方はご助言いただきたくお願い申し上げます。

Comments

[Lhankor_Mhy]

例示されているコードのクォーテーションが整合していないですが、実際のコードはちゃんとしているのですか？

[denisov]

ご指摘ありがとうございます。
クォーテーションが整合しておりませんでした。
当該内容につきまして、他の回答者様のご意見も合わせて修正いたしましたが、上記内容の解決には至りませんでした。

Answer 1

Lhankor_Mhy さんがご指摘のように，

<object data="<%=url_for(f.image)%>" type="application/pdf"  max-width=250px" max-height="250px" style="resize:both;" ></object>

の max-width=250px" の " が抜けています。
GIF 動画の右半分の DOM ツリーを見る限り，誤ったコードのまま動かしていますね。

しかし，そもそも
https://developer.mozilla.org/ja/docs/Web/HTML/Element/object
によれば，object 要素に max-width という属性はありません。
なので，" を付け足しても期待どおりにはならないように思います。

意図したのは

style="max-width: 250px; max-height: 250px"

でしょうか。

Comments

[denisov]

親切なご回答ありがとうございます。
私の知識不足でした。お恥ずかしい限りです。

250px x 250px　に収まるように、pdfをリサイズしたいという意図で、記述させていただきました。

縦長サイズの用紙ですと、height: 250px　に合わせて、
widthがリサイズされることを意図しています。

私の方でももう少し調べてみますが、ご意見等いただければと存じます。

[scivola]

いま手元で実験する余裕がないのですが object 要素の中に
<param name="initZoom" value="fitToPage">
を入れるとどうでしょうか？
あるいは
<param name="view" value="fit">
か。
もしくは object 要素の data 属性に指定する URL の末尾に
#view=Fit
を付与するとどうなりますか？

[denisov]

要素の中に
<param name="initZoom" value="fitToPage">
を入れるとどうでしょうか？
→
```
<object data="<%=url_for(f.image)%>" type="application/pdf" width="250" height="250" param name="initZoom" value="fitToPage"></object>
```
挙動のGif
https://gyazo.com/7ab3f05b0cb3887cccbeb9f12d412ed8

あるいは
<param name="view" value="fit">を入れるのはどうでしょうか
→
```
<object data="<%=url_for(f.image)%>" type="application/pdf" width="250" height="250" param name="view" value="fit"></object>
```
挙動のGif
https://gyazo.com/0c17d04c99f10fc0f3a01818eb5ad6b5

以上2つは枠250pxの中に収まりませんでした。

object 要素の data 属性に指定する URL の末尾に
#view=Fit
を付与するとどうなりますか？
→
```
<object data="<%=url_for(f.image)%> #view=Fit" type="application/pdf" width="250" height="250" ></object>
```
挙動のGif
https://gyazo.com/c30df1d97018963a2d9f408827bd1047

意図した方向性に近づきましたが、
・pdfが上下の中央に位置しない
・拡大縮小すると調整したおさまっていたさいずが崩れてしまう
２点の課題があります。

ご回答ありがとうございます。大変参考になります。
しかし、
pdfをプレビューするのは難しいのでしょうか。
実際にpdfをプレビューしているサイトの例などほとんど見かけません。
また、背景の黒バックも気になります。
投稿したpdfをjpeg等に変換して表示する。
という方向性に切り替えることも視野に考えた方がよろしいでしょうか。

[scivola]

ちょっと（私の）書き方が不親切でしたが，「object 要素の中に〜を入れる」というのは，

<object 云々>
<param name="initZoom" value="fitToPage">
</object>

という意味でした。

[denisov]

ご指摘ありがとうございます。意図を読み取れず申し訳ございません。

ご指摘を参考に以下修正した参考を載せます。

```
<object data="<%=url_for(f.image)%>" type="application/pdf" width="250" height="250" ><param name="view" value="fit"></object>
```

```
<object data="<%=url_for(f.image)%>" type="application/pdf" width="250" height="250" ><param name="view" value="fit"></object>
```
上記2つの挙動は同じでした。
wideがいっぱいまで表示され、縦はスクロールです。

挙動は以下となります。
https://gyazo.com/f05baa99dfc5b3b24a5f531874510320

[scivola]

うまくいかなかったようですみまんせ。手元で試さずに書いたので。
こちらでも実験してみたいと思いますが，すぐに時間が取れないのでいつになるかわかりません。

[denisov]

ご親切にどうもありがとうございます。
私の方でも色々やってみたいと思います。

[scivola]

実験してみました。

Firefox だと

<object data="foo.pdf#zoom=Fit" type="application/pdf"></object>

みたいな形でいけるようです。
つまり，PDF への URL に「#zoom=Fit」を付ければ，object 要素のサイズにフィットしてくれました。
このやり方でうまくいく環境の場合，実験するには HTML の object 要素を使わなくても，ブラウザーのアドレスバーに
http://localhost/hoge/fuga/foo.pdf#zoom=Fit
みたいな形で URL を指定してもうまくいきます。

しかし，Safari だとダメでした。
Safari はそもそも zoom パラメーターに対応してないようで，「#zoom=Fit」がダメなだけでなく「#zoom=25」みたいにパーセンテージで倍率を指定することもできませんでした。
でも「#page=2」のようにしてページを指定することはできるので，すべてのパラメーターを受け入れないわけではないようです。

それ以外のブラウザーについては実験してないので分かりません。

まあ，ともかく，少なくとも上に書いたやり方は特定のブラウザーでダメなので使えませんよね。

プレビュー画像を生成して表示させる方向で考えるのがいいのかもしれませんね。

[denisov]

ありがとうございます。
私の環境でもできなかったものですから、ブラウザーによって使えないこともありそうですね。

プレビュー画像を生成して表示させる方向性で考えてみたいと思います。