質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5132閲覧

Web画面のPDF出力

DgRp_08

総合スコア56

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2018/07/04 10:08

編集2018/07/06 09:40

表示中のWeb画面のPDFを出力したく、html2canvasで画像化後jsPDFでPDF生成する手法を現在検討中です。
単純にPDF化するだけなら上記手法で難なく行けるのですが、以下の要件を満たしたい場合、どのようにすればいいか詰まっております。

①Web画面に含まれる特定の画像の高さが一定ではない。(幅は固定)
②Web画面にテキストエリアが存在し、スクロールをしないと見えない部分も表示したい。
③テキストエリアの改行も反映させたい。

①は上手いこと計算等すればいいのかなとは思うのですが、どう計算すればいいか分かりません。

②はPDF出力時にスクロールさせてPDFのページを増やせばいいのではないかと思うのですが、2ページ以上jsPDFで生成しているサンプルを見つけられなくて、実現方法が分かりません。
⇛(追記)addPage()でページ増やせることが分かりました。
出力の途中でスクロールさせることの可否が未調査なので自分でも検証してみます。また、可能な場合Excel VBAのApplication.ScreenUpdating = Falseのようにスクロールの画面描画を無しにしたいですが、これも調査不足なのでまず調べてみます。

⇛(追記2)スクロールよりも、テキストエリアをPDF生成のときにだけ広げるほうが簡単そうだと気づきましたが、何か他にも案があればアドバイス頂きたいです。

③はテキストエリアの改行が消えた状態でPDF化されてしまうこと確認しており、どう対処すればいいか分かりません。

もし、実現方法がお分かりの方がいらっしゃいましたら、アドバイスをいただきたいです。
また、html2canvasとjsPDFでは難しいという場合、別の方法で可能な方法がありましたら、教えていただきたいです。

宜しくお願いします。

DrqYuto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

②の追記2について、以下のサイトの記述でテキストエリアの自動リサイズは実現できました。
https://qiita.com/YoshiyukiKato/items/507b8022e6df5e996a59

また、実行タイミングはhtml2canvasの画像生成前に実行し、PDF出力処理の最後に元のサイズを指定するだけで可能でした。画面描画もなしで実現できました。

投稿2018/07/06 09:45

DgRp_08

総合スコア56

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問