ぽっくるは怠惰でありたい

怠惰でありたい情報系大学院生のつぶやき,自作のWebアプリの紹介や備忘録を書くつもり

jsPDFがGoogle Chromeでうまく動かなくなってしまった話

jsPDFを使って私はアプリを作っています.

計算問題生成ツール

久々にアプリの動作を確認しようとしたところ

「あれ?動かないぞ…?」という事態に陥りました.

f:id:pokkurutime:20170804161715p:plain
Not allowed to navigate top frame to data URL 一体なんぞ?今までこんなエラー出てなかったじゃんと思ったけれど,おそらくブラウザの更新でセキュリティが強化されたのでしょう.おそらくdataURLを呼び出すのは直にやっちゃダメでhtmlの記述の中に入れろってことかな.

今までは
PDFを出力するときは

doc.output('datauri');

としていたのですが,これでは新しいタブで開かれて入れ子にはならずにdataURLのみでPDFを作ってくれていました.

これが使えなくなったということで
仕方がないのでPDFの設定をして出力ボタンを設置したその下に入れ子としてオブジェクトを表示するようにしてみました

var out = doc.output(); 
var pdfurl = 'data:application/pdf;base64,' + btoa(out);
$('.pdfOutput').html('<object data=\"'+pdfurl+'\"type=\"application/pdf\"></object>');

上記のような書き方の場合はjQueryを入れてpdfOutputのクラスを持ったdiv要素をHTMLに書き加えてください

<div class="pdfOutput"></div>

こんな風にしてあげると
f:id:pokkurutime:20170804163811p:plain

みたいな感じにPDFを表示することができました.
前みたいに新規ウィンドウや新規タブで表示することができた方が見栄えはいいと思うのですがそれをやろうとしたところうまくPDFの保存ができませんでしたorz

まあ,とりあえず動くようになったのでこれで一安心です.
たまにはメンテナンスを行う必要がありますね.

計算問題生成ツールは以下のページで公開しております.
四則計算や一次方程式,連立方程式平方根,乗法公式を用いた展開と因数分解,一次関数グラフなどのPDFプリントを簡単に作ることができます.
よろしければご活用ください

計算問題生成ツール

また,Androidアプリ版も提供しておりますのでご活用いただければ幸いでございます.

play.google.com