Bubble HTMLに表示させているテキストデータをPDFに文字化けさせずに出力したい

実現したい機能

Bubble内にHTMLに表示させているテキストデータをPDFでダウンロードできるようにしたい

発生している問題

出力結果の文字部分が文字化けしてしまう

エラー発生までの流れ

  1. HTMLに表示させているテキストデータをJavascriptで取得
  2. APIを使用し、PDF出力を試した
  3. 文字起こし結果の日本語部分が文字化けしてしまった

試したこと・エラー発生までの流れ

  • File Conversion APIを用いて、HTMLに表示させているテキストデータをJavascriptで取得しPDF化
  • pdf conjurerを用いて、HTMLに表示させているテキストデータをJavascriptで取得しPDF化

⇒いずれも、表示結果の日本語部分が文字化けしてしまった

スクリーンショット

  • 出力前(htmlでbubleに表示しているテキストデータ)

  • 出力後

MicrosoftTeams-image (7)

相談したいこと

上記以外に試したほうが良いAPIやツールなど、解決方法はないか?

こんばんわ

pdf conjurerを使って、文字化けせずに使えています。

フォントの設定はしていますか?
設定方法は、ノーコードラボさんのblogに記載があります。

PDF作成プラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」を実装する

「いいね!」 3

こんばんは。ご返信ありがとうございます。
フォントの設定はurlどおり、Shippori Mincho B1の設定を行いました。しかし、やはり文字化けしてしまいます。
HTMLに表示したものをJavascriptでテキストデータを引き抜いているからこそ起こるバグなのでしょうか。
具体的なelement(html.javascript)やワークフロー(PDF conjurer)の写真を添付しておきますので、アドバイスいただけると幸いです。。

bubbleのhtmlエレメント内の記述

javascriptエレメント

PDFワークフロー

→ 問題の切り分けのため、一旦、javascriptで処理する部分を外すか、
javascriptで処理しない日本語文字列を追加して見るのは如何でしょう。

「いいね!」 1

ありがとうございます!
試してみた結果、PDFに問題がありそうでした。
下記の通り行いました。


fontは教えていただいたサイトを参考にその通りに行ったのですが、fontの問題でしょうか。

文字化けなく使用できているとのことなので、もしよろしければご使用しているfontを教えていただいてもよろしいでしょうか。

フォントは、ノーコードラボさんのblogと同じ
Shippor Mincho B1
を使っています。

添付されているワークフローを見ると、このプラグインを使う順番になっていないようです。

ノーコードラボさんのBlogと同じ順番で実行するように設定してもらった方がよいかと思います。

「いいね!」 2

無事、出力できました。
数々の拙い質問にご丁寧に答えていただき、誠にありがとうございました。

「いいね!」 1