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

**URL:** <https://www.nocode-faq.com/t/topic/3240>\
**Category:** bubble\
**Tags:** ツールの操作方法, ツール選定\
**Created:** [2022 年 10 月 29 日午前 6:19 UTC](https://www.nocode-faq.com/t/topic/3240 "2022-10-29T06:19:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dozeki](https://avatars.discourse-cdn.com/v4/letter/d/e19b73/32.png) [@dozeki](https://www.nocode-faq.com/u/dozeki)\
**Post date:** [2022 年 10 月 29 日午前 6:19 UTC](https://www.nocode-faq.com/t/topic/3240/1 "2022-10-29T06:19:22Z")

</div>

### 実現したい機能

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 (6)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/3083a795ee56200910ff07055881cf23f108a2c8.png)

- 出力後

![MicrosoftTeams-image (7)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1dd2162d8c3cd415f68b365bd1f447565d8c0a02.png)

### 相談したいこと

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

---

<div class="post-metadata">

**Author:** ![kenichi.okazaki](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/kenichi.okazaki/32/5625_2.png) [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)\
**Post date:** [2022 年 10 月 29 日午後 12:20 UTC](https://www.nocode-faq.com/t/topic/3240/2 "2022-10-29T12:20:38Z")

</div>

こんばんわ

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

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

# [PDF作成プラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」を実装する](https://blog.nocodelab.jp/entry/pdf-plugin)

---

<div class="post-metadata">

**Author:** ![dozeki](https://avatars.discourse-cdn.com/v4/letter/d/e19b73/32.png) [@dozeki](https://www.nocode-faq.com/u/dozeki)\
**Post date:** [2022 年 10 月 29 日午後 1:31 UTC](https://www.nocode-faq.com/t/topic/3240/4 "2022-10-29T13:31:55Z")

</div>

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

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/cd74940a4847c2f615d4e93cb9c5a48db0e3536e.png)

javascriptエレメント

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6d28f9d50eb4a6cda22142c0184dc0edd36f914f.png)

PDFワークフロー

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/ad6f18b6f43d780f7d77a711775167e6b3325cf8.png)

---

<div class="post-metadata">

**Author:** ![kenichi.okazaki](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/kenichi.okazaki/32/5625_2.png) [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)\
**Post date:** [2022 年 10 月 30 日午前 12:02 UTC](https://www.nocode-faq.com/t/topic/3240/5 "2022-10-30T00:02:12Z")

</div>

> [@dozeki](#):
>
> HTMLに表示したものをJavascriptでテキストデータを引き抜いているからこそ起こるバグなのでしょうか。

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

---

<div class="post-metadata">

**Author:** ![dozeki](https://avatars.discourse-cdn.com/v4/letter/d/e19b73/32.png) [@dozeki](https://www.nocode-faq.com/u/dozeki)\
**Post date:** [2022 年 10 月 30 日午前 3:31 UTC](https://www.nocode-faq.com/t/topic/3240/6 "2022-10-30T03:31:09Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/65bc999723decbaef4f83f4e630acfe1fac41fe6.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/da13626810cc4ea8fb142f269d6c2efa48b002fd.png)

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

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

---

<div class="post-metadata">

**Author:** ![kenichi.okazaki](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/kenichi.okazaki/32/5625_2.png) [@kenichi.okazaki](https://www.nocode-faq.com/u/kenichi.okazaki)\
**Post date:** [2022 年 10 月 30 日午前 4:08 UTC](https://www.nocode-faq.com/t/topic/3240/7 "2022-10-30T04:08:58Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![dozeki](https://avatars.discourse-cdn.com/v4/letter/d/e19b73/32.png) [@dozeki](https://www.nocode-faq.com/u/dozeki)\
**Post date:** [2022 年 10 月 30 日午前 5:58 UTC](https://www.nocode-faq.com/t/topic/3240/8 "2022-10-30T05:58:10Z")

</div>

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