uniapp 入門実践フロントエンドページを PDF にエクスポートする-jsチュートリアル-php.cn

uniapp 入門実践フロントエンドページを PDF にエクスポートする

Patricia Arquette

リリース： 2024-11-09 02:42:01

オリジナル

771 人が閲覧しました

背景

この製品では、会社のミニプログラムと Web サイトで製品の詳細を PDF にエクスポートする必要があるため、今日はフロントエンドページを PDF にエクスポートする方法を考えています

効果を実感

uniapp 入门实战将前端页面导出成pdf

Webサイト

注意: 次のコードイメージアドレスはご自身で変更してください。

デモ: 全体的には非常に簡単です。html2canvas を使用して dom を画像に変換し、画像を jsPDF に追加して保存するだけです。

  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<h2>
  
  
  微信小程序
</h2>

<blockquote>
<p>说明：公司小程序项目是用的uniapp开发的</p>
</blockquote>

<h3>
  
  
  方法1：通过wx.miniProgram.postMessage将pdf数据传给小程序
</h3>

<blockquote>
<p>提醒：以下代码图片地址，请自行修改一下。</p>
</blockquote>

ログイン後にコピー

h5 webview页面

  <!DOCTYPE html>
  <html lang="en">

  <head>
   <meta charset="UTF-8" />
   <title>title</title>
   <style>
    .btn {
     width: 300px;
     height: 100px;
    }

    img {
     width: 100%;
     object-fit: cover;
    }
   </style>
   <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  </head>

  <body>
   <button type="button"
      >



<ul>
<li>uniapp 页面代码</li>
</ul>

<blockquote>
<p>特别提醒：请将页面部署至自己的服务器下，然后修改一下地址，然后在小程序后台把部署的域名配置到web合法域名列表下，不然webview无法加载页面<br>
</p>
</blockquote>

<pre class="brush:php;toolbar:false">  <template>
   <PageLayout>
    <web-view src="https://xxx.com/pdf_test.html"
         @message="handleGetMessage"></web-view>
   </PageLayout>
  </template>

  <script>
  export default {
   data() {
    return {
     imageData: "",
    }
   },
   methods: {
    handleGetMessage(e) {
     console.log("收到webview消息:", e)
     this.imageData = e.detail.data[0].imageData
     console.log("收到webview消息: imageData=", this.imageData);
     const base64 = this.imageData.split("base64,")[1]
     console.log("收到webview消息: path=", base64);
     this.download(base64)
    },
    async download(base64) {
     base64 = base64.replace(/[\r\n]/g, "");
     const fs = wx.getFileSystemManager();
     const buffer = wx.base64ToArrayBuffer(base64);
     const filePath = wx.env.USER_DATA_PATH + "/" + Date.now() + ".pdf"
     fs.writeFile({
      filePath,
      data: buffer,
      success(res) {
       uni.openDocument({
        showMenu: true,
        fileType: "pdf",
        filePath,
        success: function (res) {
         console.log("打开文档成功")
        }
       })
      },
      fail(err) {
       console.log("错误", err)
      }
     })
    },
   },
   onLoad(e) {

   }
  }

  </script>

  <style scoped></style>

ログイン後にコピー

方法 2: バックエンド経由でデータを転送し、ナビゲーション経由でパラメーターを渡します (最後の代替方法)

追記: h5 が wx.miniProgram.postMessage 経由でメッセージを送信していることに遭遇した場合、ミニプログラムはメッセージを検索できず、戻ったり共有したりすることは役に立ちません。解決策: データをバックエンドに保存し、ナビゲーションを通じてアプレットにパラメータを渡し、PDF をダウンロードできます。具体的なコードはここにリストされています。アイデアについて簡単に説明しましょう

h5 によってエクスポートされた PDF をバックエンドに渡し、ID を返します
wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’}) により
xx ページをロードする onLoad コールバックのオプションからパラメータを取得した後、バックエンドをチェックして pdf を取得します

要約する

Web ビューページをデプロイするときは、ミニプログラムのバックグラウンドで正当なドメイン名を構成する必要があります。そうしないと、一部の Web ビューページが正常に読み込まれます
Web ページで使用される画像の場合、対応するドメイン名もミニプログラムのバックグラウンドで設定し、リクエストの正当なドメイン名リストに設定する必要があります。そうしないと、画像がロードされない可能性があります
ミニプログラムには落とし穴が2つありますので、落ちないように注意してください。
1. ポストメッセージを監視するuniapp Webviewの機能はmessageで、WeChatアプレットで監視する方法はbindmessageです(注意：間違えないでください)
2. PostMessage は送信後すぐには応答しませんが、特定のタイミングでのみトリガーされます (バック、コンポーネントの破棄、共有トリガー、メッセージ受信)