搜尋

首頁 >web前端 >js教程 >uniapp 入門實戰 將前端頁面匯出成pdf

uniapp 入門實戰 將前端頁面匯出成pdf

Patricia Arquette
Patricia Arquette原創
2024-11-09 02:42:01751瀏覽

背景

產品要求公司的小程式和網站需要將商品詳情匯出成pdf，所以今天有琢磨一下如何將前端頁面匯出成pdf

實現效果

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

Web網站

提醒：以下程式碼圖片位址，請自行修改一下。

  • demo： 整體來說很簡單，就是藉助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。具體程式碼就羅列了，簡單說下思路

  1. 將h5導出的pdf傳給後端，然後回傳一個id
  2. 透過wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
  3. 然後xx頁面載入的onLoad回呼中從option拿到參數後，反查後端拿pdf

總結

  • 部署webview頁面時，需要小程式後台配置合法域名，否則部分正常載入webview的頁面
  • web頁中使用的圖片，對應的網域名稱也要在小程式後台進行配置，配置到request合法網域清單中，不然圖片可能載入不出來
  • 小程式2個坑位，千萬要注意，別掉坑裡了。
    1. uniapp webview 監聽postmessage的函數是message，微信小程式裡面監聽的方法是bindmessage（注意：千萬別搞錯了）
    2. postMessage發送後不是立即回應的，而是只在特點時機觸發的 （後退、組件銷毀、分享觸發並收到訊息）

參考文獻

  • uniapp實作將頁面轉換成pdf（小程式、app、h5）
  • web-view
  • 關於h5跳到小程式的坑
  • https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

以上是uniapp 入門實戰 將前端頁面匯出成pdf的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html JS dom webview 微信小程序 https
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jQuery 中如何保證事件執行順序？下一篇：jQuery 中如何保證事件執行順序？

相關文章

看更多