微信下载pdf

2026-10-20 22:21:09 +00:00 · 2024-11-19 16:38:29 +08:00
parent 8a2fdf7c90
commit 6a2fe5ad42
5 changed files with 176 additions and 3 deletions
@@ -148,6 +148,7 @@ https://github.com/027xiguapi/code-box
 2. [plasmo](https://github.com/PlasmoHQ/plasmo)
 3. [Chrome 应用商店一站式支持](https://support.google.com/chrome_webstore/contact/one_stop_support)
 4. [开箱即用的web打印和下载](https://juejin.cn/post/7412672713376497727)
+5. [导出微信公众号文章为PDF](https://greasyfork.org/en/scripts/510683-%E5%AF%BC%E5%87%BA%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%96%87%E7%AB%A0%E4%B8%BApdf/code)

 ## 隐私政策

@@ -0,0 +1,25 @@
+import { DownloadOutlined, StarTwoTone } from "@ant-design/icons"
+
+import { sendToContentScript } from "@plasmohq/messaging"
+
+import { i18n } from "~tools"
+
+export default function DownloadPdf(props) {
+  let { name } = props
+
+  async function downloadPdf() {
+    sendToContentScript({
+      name: `${name}-downloadPdf`
+    })
+  }
+
+  return (
+    <div className="item download" onClick={downloadPdf}>
+      <span>
+        <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+        {i18n("downloadPdf")}
+      </span>
+      <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+    </div>
+  )
+}
@@ -1,6 +1,7 @@
 import CssCode from "~component/items/cssCode"
 import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
+import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
 import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
@@ -14,6 +15,7 @@ export default function Weixin() {
      <EditMarkdown name="weixin"></EditMarkdown>
      <DownloadMarkdown name="weixin"></DownloadMarkdown>
      <DownloadHtml name="weixin"></DownloadHtml>
+      <DownloadPdf name="weixin"></DownloadPdf>
    </fieldset>
  )
 }
@@ -1,3 +1,4 @@
+import html2pdf from "html2pdf.js"
 import type {
  PlasmoCSConfig,
  PlasmoCSUIProps,
@@ -6,7 +7,6 @@ import type {
  PlasmoGetStyle
 } from "plasmo"
 import { useEffect, type FC } from "react"
-import { v4 as uuidv4 } from "uuid"

 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
@@ -17,7 +17,7 @@ import { useContent } from "~utils/editMarkdownHook"
 import Turndown from "~utils/turndown"

 export const config: PlasmoCSConfig = {
-  matches: ["https://mp.weixin.qq.com/*"]
+  matches: ["https://mp.weixin.qq.com/s/*"]
 }

 const turndownService = Turndown()
@@ -69,8 +69,152 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
    if (req.name == "weixin-downloadHtml") {
      downloadHtml()
    }
+    if (req.name == "weixin-downloadPdf") {
+      downloadPdf()
+    }
  })

+  console.log(777, html2pdf)
+
+  function downloadPdf() {
+    // 获取文章内容和标题、作者、时间等元信息
+    var article = document.querySelector<HTMLElement>(".rich_media_content")
+    var title = document.querySelector<HTMLElement>(".rich_media_title")
+    var author = document.querySelector<HTMLElement>(".weui-wa-hotarea") // 文章作者
+    var publishTime = document.querySelector<HTMLElement>("#publish_time") // 文章时间
+
+    if (article) {
+      // 创建一个容器用于添加元信息
+      var metaInfoDiv = document.createElement("div")
+      metaInfoDiv.style.marginBottom = "20px"
+      metaInfoDiv.style.borderBottom = "1px solid #eee"
+      metaInfoDiv.style.paddingBottom = "15px"
+
+      // 标题
+      var titleElement = document.createElement("h1")
+      titleElement.innerText = title ? title?.innerText.trim() : "未命名文章"
+      titleElement.style.fontSize = "24px"
+      titleElement.style.marginBottom = "10px"
+      metaInfoDiv.appendChild(titleElement)
+
+      // 作者
+      if (author) {
+        var authorElement = document.createElement("p")
+        authorElement.innerText = "作者: " + author.innerText.trim()
+        authorElement.style.fontSize = "14px"
+        authorElement.style.margin = "5px 0"
+        metaInfoDiv.appendChild(authorElement)
+      }
+
+      // 时间
+      if (publishTime) {
+        var timeElement = document.createElement("p")
+        timeElement.innerText = "发布时间: " + publishTime.innerText.trim()
+        timeElement.style.fontSize = "14px"
+        timeElement.style.margin = "5px 0"
+        metaInfoDiv.appendChild(timeElement)
+      }
+
+      // 将元信息插入到文章内容的顶部
+      article.insertBefore(metaInfoDiv, article.firstChild)
+
+      // 添加防止图片分页的CSS样式
+      var style = document.createElement("style")
+      style.innerHTML = `
+        .rich_media_content img {
+          page-break-inside: avoid;
+          break-inside: avoid;
+          max-width: 100%;
+          height: auto;
+        }
+        .rich_media_content p, .rich_media_content div {
+          page-break-inside: avoid;
+          break-inside: avoid;
+        }
+      `
+      document.head.appendChild(style)
+
+      // 确保所有图片加载完成
+      let images = article.querySelectorAll("img")
+      let imagePromises = []
+
+      images.forEach(function (img) {
+        // 处理懒加载的图片，确保图片的真实 URL 被加载
+        if (img.dataset && img.dataset.src) {
+          img.src = img.dataset.src
+        }
+
+        // 通过跨域获取图片，并将图片转换为 base64 格式
+        imagePromises.push(
+          new Promise(function (resolve) {
+            var imgElement = new Image()
+            imgElement.crossOrigin = "Anonymous"
+            imgElement.src = img.src
+            imgElement.onload = function () {
+              var canvas = document.createElement("canvas")
+              canvas.width = imgElement.width
+              canvas.height = imgElement.height
+              var ctx = canvas.getContext("2d")
+              ctx.drawImage(imgElement, 0, 0)
+              img.src = canvas.toDataURL("image/jpeg") // 使用JPEG格式并压缩质量到70%
+              resolve()
+            }
+            imgElement.onerror = resolve // 即使图片加载失败，继续处理
+          })
+        )
+      })
+
+      // 确保图片加载完成后再导出PDF
+      Promise.all(imagePromises)
+        .then(function () {
+          // 使用文章标题作为文件名
+          var fileName = title
+            ? title.innerText.trim() + ".pdf"
+            : "WeChat_Article.pdf"
+
+          var opt = {
+            margin: 0.5,
+            filename: fileName,
+            image: {
+              type: "jpeg",
+              quality: 1 // 降低图片质量以减小PDF体积
+            },
+            html2canvas: {
+              scale: 1.5, // 降低渲染比例以减小PDF体积
+              useCORS: true, // 允许跨域图片
+              logging: false // 关闭日志
+              // 可以根据需要添加其他html2canvas选项
+            },
+            jsPDF: {
+              unit: "in",
+              format: "a4", // 使用A4格式，比letter更常用且体积可能更小
+              orientation: "portrait"
+            },
+            pagebreak: {
+              mode: ["avoid-all", "css", "legacy"]
+            } // 遵循CSS中的page-break规则
+          }
+
+          // 使用 html2pdf 将文章内容导出为 PDF
+          html2pdf()
+            .from(article)
+            .set(opt)
+            .save()
+            .then(function () {})
+            .catch(function (error) {
+              alert("导出过程中出现问题: " + error.message)
+              console.log(error)
+            })
+        })
+        .catch(function (error) {
+          alert("处理图片时出现问题: " + error.message)
+          console.log(error)
+        })
+    } else {
+      alert("未找到文章内容")
+    }
+  }
+
  function downloadMarkdown() {
    const html = document.querySelector("#img-content")
    const markdown = turndownService.turndown(html)
@@ -1,7 +1,7 @@
 {
  "name": "code-box",
  "displayName": "__MSG_extensionName__",
-  "version": "0.9.14",
+  "version": "0.9.15",
  "description": "__MSG_extensionDescription__",
  "author": "027xiguapi. <458813868@qq.com>",
  "scripts": {
@@ -33,6 +33,7 @@
    "dayjs": "^1.11.12",
    "file-saver": "^2.0.5",
    "html2canvas": "^1.4.1",
+    "html2pdf.js": "^0.10.2",
    "jspdf": "^2.5.2",
    "jssha": "^3.3.1",
    "plasmo": "0.89.4",