Home >Web Front-end >JS Tutorial >uniapp Getting Started Practical Export the front-end page to pdf

uniapp Getting Started Practical Export the front-end page to pdf

Patricia ArquetteOriginal: 2024-11-09 02:42:01751browse

background

The product requires that the company’s mini-programs and websites need to export product details into pdf, so today I’m thinking about how to export the front-end page into pdf

Realize the effect

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

Web site

Reminder: Please modify the following code image address yourself.

demo: Overall it is very simple, just use html2canvas to convert dom into pictures, then add pictures to jsPDF, and then save it.

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

Method 2: Transfer data through the backend, and then pass parameters through navigation (the last alternative)

Additional note: If you encounter h5 sending a message through wx.miniProgram.postMessage, the mini program will not be able to search for the message, and returning and sharing will be useless. Solution: You can save the data to the backend, then pass the parameters to the applet through navigation, and then download the pdf. The specific codes are listed here, let’s briefly talk about the ideas

Pass the pdf exported by h5 to the backend, and then return an id
By wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
Then after getting the parameters from the option in the onLoad callback of loading the xx page, check the backend to get the pdf

Summarize

When deploying a webview page, you need to configure a legal domain name in the mini program background, otherwise some webview pages will load normally
For images used in web pages, the corresponding domain names must also be configured in the mini program background and configured into the request legal domain name list, otherwise the images may not be loaded
There are 2 pitfalls in the mini program. Be careful not to fall into the pit.
1. The function of uniapp webview to monitor postmessage is message, and the method of monitoring in WeChat applet is bindmessage (note: don’t make a mistake)
2. PostMessage does not respond immediately after being sent, but is only triggered at specific times (back, component destruction, sharing trigger and message receipt)

References

uniapp implements the conversion of pages into pdf (small program, app, h5)
web-view
About the pitfalls of h5 jumping to mini programs
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

The above is the detailed content of uniapp Getting Started Practical Export the front-end page to pdf. For more information, please follow other related articles on the PHP Chinese website!

html JS dom webview 微信小程序 https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Ensure Event Execution Order in jQuery?Next article：How to Ensure Event Execution Order in jQuery?

See more