uniapp Prise en main Pratique Exporter la page front-end en pdf-js tutoriel-php.cn

uniapp Prise en main Pratique Exporter la page front-end en pdf

Patricia Arquette

Libérer： 2024-11-09 02:42:01

original

691 Les gens l'ont consulté

arrière-plan

Le produit nécessite que les mini-programmes et les sites Web de l'entreprise exportent les détails du produit au format PDF, donc aujourd'hui, je réfléchis à la façon d'exporter la page frontale au format PDF

Réalisez l'effet

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

Site web

Rappel : Veuillez modifier vous-même l'adresse de l'image de code suivante.

démo : dans l'ensemble, c'est très simple, utilisez simplement html2canvas pour convertir le dom en images, puis ajoutez des images à jsPDF, puis enregistrez-le.

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

Copier après la connexion

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>

Copier après la connexion

Méthode 2 : transférer les données via le backend, puis transmettre les paramètres via la navigation (la dernière alternative)

Remarque supplémentaire : si vous rencontrez h5 envoyant un message via wx.miniProgram.postMessage, le mini programme ne pourra pas rechercher le message, et le retour et le partage seront inutiles. Solution : vous pouvez enregistrer les données sur le backend, puis transmettre les paramètres à l'applet via la navigation, puis télécharger le pdf. Les codes spécifiques sont répertoriés ici, parlons brièvement des idées

Transmettez le pdf exporté par h5 au backend, puis retournez un identifiant
Par wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
Ensuite, après avoir obtenu les paramètres de l'option dans le rappel onLoad de chargement de la page xx, vérifiez le backend pour obtenir le pdf

Résumer

Lors du déploiement d'une page WebView, vous devez configurer un nom de domaine légal en arrière-plan du mini-programme, sinon certaines pages WebView se chargeront normalement
Pour les images utilisées dans les pages Web, les noms de domaine correspondants doivent également être configurés en arrière-plan du mini-programme et configurés dans la demande de liste de noms de domaine légaux, sinon les images risquent de ne pas être chargées
Il y a 2 pièges dans le mini programme Attention à ne pas tomber dans le gouffre.
1. La fonction de la vue Web Uniapp pour surveiller le post-message est un message, et la méthode de surveillance dans l'applet WeChat est un message de liaison (remarque : ne vous trompez pas)
2. PostMessage ne répond pas immédiatement après son envoi, mais n'est déclenché qu'à des moments précis (retour, destruction de composants, déclencheur de partage et réception du message)