uniapp Getting Started Practical Exportieren Sie die Frontend-Seite als PDF-js-Tutorial-php.cn

uniapp Getting Started Practical Exportieren Sie die Frontend-Seite als PDF

Patricia Arquette

Freigeben： 2024-11-09 02:42:01

Original

691 Leute haben es durchsucht

Hintergrund

Das Produkt erfordert, dass die Miniprogramme und Websites des Unternehmens Produktdetails in PDF exportieren müssen, daher denke ich heute darüber nach, wie ich die Frontend-Seite in PDF exportieren kann

Erkennen Sie die Wirkung

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

Website

Erinnerung: Bitte ändern Sie die folgende Codebildadresse selbst.

Demo: Im Großen und Ganzen ist es sehr einfach: Verwenden Sie einfach html2canvas, um Dom in Bilder umzuwandeln, fügen Sie dann Bilder zu jsPDF hinzu und speichern Sie es dann.

  <!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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Methode 2: Daten über das Backend übertragen und dann Parameter über die Navigation übergeben (die letzte Alternative)

Zusätzlicher Hinweis: Wenn h5 beim Senden einer Nachricht über wx.miniProgram.postMessage auftritt, kann das Miniprogramm nicht nach der Nachricht suchen und das Zurücksenden und Teilen ist nutzlos. Lösung: Sie können die Daten im Backend speichern, dann die Parameter über die Navigation an das Applet übergeben und dann das PDF herunterladen. Die spezifischen Codes sind hier aufgelistet. Lassen Sie uns kurz über die Ideen sprechen

Übergeben Sie das von h5 exportierte PDF an das Backend und geben Sie dann eine ID zurück
Von wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
Nachdem Sie dann die Parameter aus der Option im onLoad-Rückruf zum Laden der xx-Seite erhalten haben, überprüfen Sie das Backend, um das PDF zu erhalten

Zusammenfassen

Beim Bereitstellen einer Webview-Seite müssen Sie im Hintergrund des Miniprogramms einen legalen Domänennamen konfigurieren, andernfalls werden einige Webview-Seiten normal geladen
Für Bilder, die auf Webseiten verwendet werden, müssen die entsprechenden Domänennamen auch im Hintergrund des Miniprogramms konfiguriert und in der Liste rechtliche Domänennamen anfordern konfiguriert werden, andernfalls werden die Bilder möglicherweise nicht geladen
Es gibt 2 Fallstricke im Miniprogramm. Passen Sie auf, dass Sie nicht in die Grube fallen.
1. Die Funktion von uniapp webview zum Überwachen von Postnachrichten ist die Nachricht, und die Überwachungsmethode im WeChat-Applet ist bindmessage (Hinweis: Machen Sie keinen Fehler)
2. PostMessage antwortet nicht sofort nach dem Senden, sondern wird nur zu bestimmten Zeitpunkten ausgelöst (Zurück, Komponentenzerstörung, Freigabeauslöser und Nachrichtenempfang)

Referenzen

uniapp implementiert die Konvertierung von Seiten in PDF (kleines Programm, App, h5)
Webansicht
Über die Fallstricke des h5-Springens zu Miniprogrammen
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

Das obige ist der detaillierte Inhalt vonuniapp Getting Started Practical Exportieren Sie die Frontend-Seite als PDF. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!