產品要求公司的小程式和網站需要將商品詳情匯出成pdf，所以今天有琢磨一下如何將前端頁面匯出成pdf
提醒：以下程式碼圖片位址，請自行修改一下。
<!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>
<!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>
補充說明：如果你碰到h5透過wx.miniProgram.postMessage發送訊息，小程式死活的搜尋不到訊息，回傳、分享都沒用。解決方法：可以透過將資料儲存至後端，然後再透過導航將參數傳給小程序，然後再下載pdf。具體程式碼就羅列了，簡單說下思路
以上是uniapp 入門實戰 將前端頁面匯出成pdf的詳細內容。更多資訊請關注PHP中文網其他相關文章！
