DEV Community: FreeCoderX

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

FreeCoderX — Thu, 07 Nov 2024 09:05:52 +0000

背景

产品要求公司的小程序和网站需要将商品详情导出成pdf，所以今天有琢磨一下如何将前端页面导出成pdf

实现效果

Web网站

提醒：以下代码图片地址，请自行修改一下。

demo：整体来说很简单，就是借助html2canvas将dom转成图片，然后jsPDF添加图片，然后保存即可

  <!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"
       class="btn btn-primary"
       onclick="exportPdf()">导出PDF</button>
   <div id="app">
    <h1>自然石纹的纯粹之美</h1>
    <img src="https://xxx/img-0-0.png?x-oss-process=image/resize,m_fill,h_1133,w_750,limit_0,q_80"
       alt="">
    <div>
     5A全抛釉 打造高性价比空间
    </div>
   </div>

   <script type="module">
    import jsPDF from 'https://cdn.jsdelivr.net/npm/jspdf@2.5.2/+esm';

    function exportPdf() {
     let shareContent = document.getElementById('app');
     let width = shareContent.offsetWidth;
     let height = shareContent.offsetHeight;
     html2canvas(shareContent, {
      dpi: 900,
      scrolly: 0,
      // width:eleW,//生成后的宽度
      // height:eleH,//生成后的高度
      scrollx: -10,
      useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      // backgroundColor: null //避免图片有白色边框
     }).then((canvas) => {
      let context = canvas.getContext('2d');
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      let pageData = canvas.toDataURL('image/jpeg', 1.0);
      let img = new Image();
      img.src = pageData;
      img.onload = () => {
       img.width = img.width;
       img.height = img.height;
       console.log(img.width, '------ img.width');
       console.log(img.height, '------img.height');
       let pdf = null;
       if (width > height) {
        // 此可以根据打印的大小进行自动调节
        // eslint-disable-next-line
        pdf = new jsPDF('l', 'mm', [width, height]);
       } else {
        // eslint-disable-next-line
        pdf = new jsPDF('p', 'mm', [width, height]);
       }
       pdf.addImage(pageData, 'jpeg', 0, 0, width, height);
       pdf.save('安全服务协议' + '.pdf');  //h5在这就可以保存pdf
      };
     }).catch((r) => {
      console.log(r);
     })
    }

    window.exportPdf = exportPdf;
   </script>
  </body>

  </html>

微信小程序

说明：公司小程序项目是用的uniapp开发的

方法1：通过wx.miniProgram.postMessage将pdf数据传给小程序

提醒：以下代码图片地址，请自行修改一下。

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"
       class="btn btn-primary"
       onclick="exportPdf()">导出PDF</button>
   <div id="app">
    <h1>自然石纹的纯粹之美</h1>
    <img src="https://xxx/img-0-0.png?x-oss-process=image/resize,m_fill,h_1133,w_750,limit_0,q_80"
       alt="">
    <div>
     5A全抛釉 打造高性价比空间
    </div>
   </div>

   <script type="module">
    import jsPDF from 'https://cdn.jsdelivr.net/npm/jspdf@2.5.2/+esm';

    function exportPdf() {
     let shareContent = document.getElementById('app');
     let width = shareContent.offsetWidth;
     let height = shareContent.offsetHeight;
     html2canvas(shareContent, {
      dpi: 900,
      scrolly: 0,
      // width:eleW,//生成后的宽度
      // height:eleH,//生成后的高度
      scrollx: -10,
      useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
      // backgroundColor: null //避免图片有白色边框
     }).then((canvas) => {
      let context = canvas.getContext('2d');
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      let pageData = canvas.toDataURL('image/jpeg', 1.0);
      let img = new Image();
      img.src = pageData;
      img.onload = () => {
       img.width = img.width;
       img.height = img.height;
       console.log(img.width, '------ img.width');
       console.log(img.height, '------img.height');
       let pdf = null;
       if (width > height) {
        // 此可以根据打印的大小进行自动调节
        // eslint-disable-next-line
        pdf = new jsPDF('l', 'mm', [width, height]);
       } else {
        // eslint-disable-next-line
        pdf = new jsPDF('p', 'mm', [width, height]);
       }
       pdf.addImage(pageData, 'jpeg', 0, 0, width, height);
       pdf.save('安全服务协议' + '.pdf');  //h5在这就可以保存pdf

       wx.miniProgram.getEnv(function (res) {
        console.log("当前环境：" + JSON.stringify(res));
        if (res.miniprogram) {
         wx.miniProgram.postMessage({
          data: {
           imageData: pdf.output("datauristring"),
          }
         });
         wx.miniProgram.navigateBack({ delta: 1 })
        }
       });
      };
     }).catch((r) => {
      console.log(r);
     })
    }

    window.exportPdf = exportPdf;
   </script>
  </body>

  </html>

uniapp 页面代码

特别提醒：请将页面部署至自己的服务器下，然后修改一下地址，然后在小程序后台把部署的域名配置到web合法域名列表下，不然webview无法加载页面

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

方法2：通过后端中转数据，然后通过导航传参（最后的备用方案）

补充说明：如果你碰到h5通过wx.miniProgram.postMessage发送消息，小程序死活的搜索不到消息，返回、分享都没用。解决办法：可以通过将数据保存至后端，然后再通过导航将参数传给小程序，然后再下载pdf。具体代码就罗列了，简单说下思路

将h5导出的pdf传给后端，然后返回一个id
通过wx.miniProgram.navigateTo({url: ‘/pages/xx/xx?id=234’})
然后xx页面加载的onLoad回调中从option拿到参数后，反查后端拿pdf

总结

部署webview页面时，需要小程序后台配置合法域名，否则部分正常加载webview的页面
web页面中用到的图片，相应的域名也要在小程序后台进行配置，配置到request合法域名列表中，不然图片可能加载不出来
小程序2个坑位，千万要注意，别掉坑里了。
1. uniapp webview 监听postmessage的函数是message，微信小程序里面监听的方法是bindmessage（注意：千万别搞错了）
2. postMessage发送后不是立即响应的，而是只在特点时机触发的（后退、组件销毁、分享触发并收到消息）

参考文献

经过2个多月终于把我的github Sponsor弄好

FreeCoderX — Sat, 28 Sep 2024 13:14:53 +0000

背景

每当我看到别人github时，时不时的就会看到他们的github sponsor，既能开源做自己喜欢的事情还能赚钱，最后赚到的钱完全可以支撑自己的生活开支，说不定我也能做到这样，可以成为一名独立开发者，不用每天拖着疲惫的身躯去上班，每天通勤3小时，每天上晚班后回到家都感觉很疲惫，回家还要继续做自己开源项目，挤出来的时间就非常少，基本就只能周末才可以开心的搞开源。假如可以在家里写代码，省去3小时上班通勤时间，这该多美好啊！所以我在尝试改变，挤出一点时间来做自己的事，让自己能走出这种困局，说到底就是钱的问题。

于是我就开始琢磨如何开通github sponsor，让大家赞助自己实现独立开发者的梦想，经过捣腾我发现开通github sponsor并不是那么简单的事情，github sponsor 开通对中国用户非常不友好（此处不展开说，你懂的），需要经过一系列的审核，而且审核时间还很长，还有一部分自身原因，所以才导致了经过2个多月才把我的github sponsor弄好。接下来就讲讲在开通github sponsor过程中遇到的问题和解决方法。

Github Sponsor 赞助在中国区域不可用

由于我在深圳距离香港进，然后看到香港区域可用，所以就在想我办张香港卡岂不就可以了，此时就在网上搜索攻略去香港办银行卡。于是网上找到了这篇文章：香港银行开户攻略：大陆人如何拥有香港银行卡？汇丰、中国银行等开户要求，看完这篇文章后，让我知道了我应该办哪种卡，所以我选择了汇丰One(简单无门槛)，然后在网上搜索了要准备什么资料，比如：身份证、地址证明、最近3个月的银行流水，担心办卡的时候要这些资料，去汇丰办卡需要网上预约，此时要注意一点，就是要选择偏僻一点的银行，因为审核没有那么严格办卡会顺利很多，最终我选择了汇丰元朗支行，网上预约完后记得接听香港客服电话确认，第一次我接到了电话，银行客服打过来电话信号非常差，而且客服是香港人普通话说的真的烂，由于他们分行已经越满了，不过可以转至最近的天水围分行(那边有号)，到时候天水围分行客服会打电话确认，结果那天我刚好有个会议，刚好错过了电话，打过去电话也已经下班了，第二天就是周末，只能硬着头皮早点过去，心想偏僻一点的分行，银行人不多吧，结果偏僻的分行人也很多，全是大陆过去办卡的人。补充说一句，到大分行立马找客服咨询办卡流程是怎么样的，让他给你取号，然后就是下载香港汇丰银行App，上去填写各种信息，我填信息估计都搞了20分钟，不懂就问客服，我10点左右到的等了1个小时才轮到我，中途就是在app上按客服指引操作，办卡的时候只需要身份证就可以了，办完当场就拿到了卡，要往卡里存100港币才能激活，否则卡是用不了的（提示：外面有存款和改密码的柜机，有的既可以存钱又可以改密码，有的只能操作一项。提醒：过去办卡记得要准备100港币现金）

说明：可以通过此链接查看支持的区域《Supported regions for GitHub Sponsors》
https://docs.github.com/en/sponsors/getting-started-with-github-sponsors/about-github-sponsors#supported-regions-for-github-sponsors

简单总结一下

预约汇丰银行
准备100港币现金
身份证
下载香港汇丰银行App（先下载好，不要上去操作，等到那边按客服要求操作）
路线规划（提前查好路线，不要迟到）
选择偏僻一点的分行，早点过去

如果你想抄作业，提供一下我办卡的分行和路线：

办卡分行：

路线：从福田口岸过关，过关后就是落马洲做B1线大巴，坐到天水围运动场下车，然后走路过去就可以了。（当天我们坐的车在天水围运动场没停，直接让我们坐到总站，真想Fuck还要走回去再过去，还好也不是很远）

开通Github Sponsor

点进去按指引填写就可以了，接下来就是漫长的等待审核，等一周没处理都是很正常的事情，我就利用网友分享的方法，他们不处理就给他们提工单，如果提一个过几天还没有反应就再提一个，这样就可以加快审核速度，看效果：

开通Github Sponsor需要创建Stripe账号

可以参考这个教程来填信息，Stripe 注册教程、国内注册 Stripe 香港帐号教程！如何注册 Stripe 个人账户？10分钟即可成功注册 Stripe、轻松推特收款｜数字牧民LC

看完这个教程后，我发现我的护照过期了，只能重新办理，需要20个工作日，接下来就继续等待，等护照办好后，再继续填写信息了。

继续填写信息，发现我分行在Stripe平台找不到

最终通过给stripe和github提交工单解决，估计之前平台信息没同步，现在信息同步了可以找到我的分行了。这个过程也是漫长的沟通等待

补充说明：

汇丰银行卡，前3位为分行号，后面才是卡号，所以填写信息的时候要注意，不要填错了。
添加账号名称的时候，是填英文名(卡号账号名)，不是中文名。

前几天终于审核通过了，收到了这个邮件

配置Github Sponsor

最后

以上我是经过2个多月把github Sponsor开通的经验，希望能给大家一份参考，避免少走弯路提供一点帮助。希朋友们可以支持一下：关注我、帮我点star、提PR、反馈意见都可以，当然赞助我更好😄，能让我早点实现独立开发者的梦想，感谢大家！🌹

加我微信，拉你入群：开源逐梦之路，一起交流学习，共同探索开源之路！💪

Give the celebrity open source project Nuxt, submit the whole process of the first PR of life🎉

FreeCoderX — Wed, 14 Aug 2024 01:53:26 +0000

The whole process has gone through two and a half months. This is a very long process. Maybe you will give up because of this, but I still persist. Let me share my PR experience.

Background

issue：Decode function for useCookie called for every cookie present

You may ask: Why do you choose to solve this problem?Is there any special thing about this problem?Explain the reason:

Clear description of the problem
There is a comeback step
There is a minimum compound code reposition

tips: When you submit the ISSUE, you want your problem to solve it. You have to learn to think in other places. If you are a traveler, what key information do you want the Isue to provide?If you have the above 3 points, you may be interested in solving this problem. If you do n’t have it, you may take a look. If you understand this problem, you may solve it. If you do n’t understandIt will always be ignored.This is why many projects need to provide REPRODUCTION. If the REPRODUCTION is not provided, the issue is directly closed.

What do you think of the problem based on the isue and see what the problem is?

code:

<script setup lang="ts">
  const fooCookie = useCookie('foo', {
    default: () => 'FOO'
  })
  const barCookie = useCookie('bar', {
    default: () => 'BAR',
    decode(value) {
      console.log({action: 'decode', baz: value, source: 'bar'})
      return value
    },
  })
  const bazCookie = useCookie('baz', {
    decode(value) {
      console.log({action: 'decode', baz: value, source: 'baz'})
      return value
    },
    encode(value) {
      console.log({action: 'encode', baz: value})
      return value
    },
  })
  onMounted(() => {
    console.log(`All cookies: ${document.cookie}`)
  })
</script>
<template>
  <div>
    <h1>Coookies</h1>
    <div>
      <p>Foo: "{{ fooCookie }}"</p>
      <p>Bar: "{{ barCookie }}"</p>
      <p>Baz: "{{ bazCookie}}"</p>
    </div>
  </div>
</template>

Output results:

Why did it appear 4 times Decode?FOO and BAR's decode were called twice.Barcookie's Decode and BazCookie's decode should be called only once, that is, their own cookies will be called.

This is the description of the problem of submitting issues

After understanding the problem, let's see how to solve this problem

Debugging the problem, find the specific reasons

Add a Debugger directly to the Decode, and then see the calling stack to see who calls it

There is no problem at this time, we go back to the Readrawcookies, at this time it is the value of the document.cookie

See how PARSE analyzes

It can be seen that Cookie has key = value and then adds a section to stitch it. Then the analysis is analyzed in this way, and then see what Trydecode does

Finally, I arrived at BarCookie's Decode. At this time, we know why the cookie, which does not belong to its own cookie name, is also called, because the pressure is not filtered at all, so this problem will cause this problem.

Solve problem

The first PR (Closed：5-22)

The above question comes from the cookie-ES library. The first solution I think returns the key to the upper layer, and then let the upper layer decide whether to decode.

Pi0 said it is more subtle, a little embarrassing 😅

I deliberately set his plan in this sentence, haha

He explicitly told me to add a judgment in line 52

Note: Filter is best to use industry standard writing, so that others know what it means at a glance, rather than when the user waits for the error to report that the condition is reversed.

The second PR (Merged: 5-22)

According to the first PR modification suggestion, this PR.

The next step is a long waiting, waiting for PI0 to release a new package, so I can change the ISSUE corresponding to Nuxt before mentioning PR

Waiting for cookies to release a new package

Cookie-ES releases a new package (7-19)

At this point: Happy and depressed, hurry up and modify the code modification and pick PR

As a result, I found that my code was not at all. Look at the submitted record and found that PI0 lost my code. I finally mentioned a PR. The result was gone.

The third PR (Merged: 7-25)

Since the first mention of PR has been waiting for too long, the code was lost, so this time I finished the PR and left a message to let him release a new package, otherwise I do n’t know when to wait to fix the bug on Nuxt.

This time I quickly responded, and PI0 updated the new package.

Submit PR to NUXT

The first PR (7-22)

It was found that the test was passed, but the new Filter option was not tested, so it was a wave of modification test. In the end, the PR merged was merged

Related issue:

Problems along the way

The added test case is not tested in VITES
vscode vitest This is a very cheating stuff, it is unavoidable at all. I don’t know if everyone is the same as me.

Question 1: Can't detect test cases, my new installation dependencies are useless
Question 2: Always loading, don’t know what ghost is doing
Question 3: The test case was detected in the middle, but the test case was not running.

No way to test, how can I test my code?This Vitest really can't use it, just write the test in Playground, and then submit the PR after the test passes.
After the code was submitted, I found that the CI test was not passed. At this time, I was inspired. Github Ci could run the test. I looked at the command it executed.You can test it.

tips: If you can't figure out what order to execute the command in a project, and then the page turning document is not figured out, you can see the yml file under the. Github/Workflows folder, which is the CI execution command. You can refer to this file.Let's execute your command.

Receive Nuxt post emails

I finally saw me, very happy. This is the first time I submitted PR for the star project. I was also released. I was very happy. It was also affirming my efforts during this time.

Summarize

In the ISSUE, you must provide the minimum reciprocating code, which is convenient for the maintenance of the maintenance.
It is not easy to mention PR for the star project, there will be a lot of restrictions, and the requirements will be higher, so be patient, don’t give up
Ind the problem if you have a problem, find the root of the problem, and then solve the problem
In the solution to a problem, think better and more reasonable solution, rather than solve the current problem
At when the big project is unable to start, look at the execution process of the CI to understand the implementation command of the project (although the document is okay, sometimes there will be problems that are not updated in time)

Recently, I opened an article assistant artipub, which can help you publish MarkDown for multiple platforms for you to better spread knowledge and share your experience.
Official website Address: https://artipub.github.io/artipub/
(Tip: domestic visit may be a bit slow, and it will be quickly over the wall.)

Help to click Star ⭐ to let more people know this tool, thank you all 🙏. If you are interested, please join you to join and improve this tool together.

Good news is here! 🎉🎉🎉use artipub to automatically publish the article to more platforms

FreeCoderX — Wed, 17 Jul 2024 03:36:54 +0000

ArtiPub (article release assistant) is a tool library aimed at simplifying content creators to publish the article process.It provides a simple API that allows you to easily publish the article to any platforms, such as blogs, social media, etc., without manual operation of each platform. artipub

❓ Why do you need artipub?

Local pictures cited in Markdown need to manually compress the picture, then upload to the bed, and finally replace the picture link
After Markdown finished writing, I want to publish it to other platforms to avoid manual Copy
After Markdown finished writing the article, I need to modify some of the contents of Markdown and let it regenerate the content of Markdown
...

Note: ArtiPub will help you solve these problems automatically, and will expand more in the future

✨ Features

🌐 Multi-platform release: Support that the Markdown article is published to multiple mainstream content platforms, including but not limited to Notion, Medium, Dev.to, etc.
✨ Simple and easy to use: Provide a simple API, and only need a few lines of code to implement the article release.
🔌 Support middleware and plugin: Through plug -in and middle parts, let users make more fine -grained control processing and release processes.
📖 Complete open source: Encourage community contributions and continue to increase new platform support and functions.

📌 TODO

[x] DevToPublisherPlugin
[x] Document Site

🔧 Built-in

Treatment middleware

Name	Support	Description
piccompress	√	Automatic compression of the picture
Picupload	√	Picture Upload

Publish plug -in

Name	Support	Description
NOTIONPUBLISHERPLUGIN	√	Published to NOTION
DEVTOPUBLISHERPLUGIN	√	Published to DEV.TO

🌟Birth background

Phase 1: Abandon Evernote and switch to Notion

At first, I used Evernote to record notes. As time went by, I came into contact with more and more things, and naturally I recorded more and more notes. So I wanted to classify my notes more finely, but Evernote only has three levels of classification. I learned how to organize notes online, read a series of articles, and finally found that this method of classification with a maximum of three levels of directories made me very uncomfortable.
Another point is to fix "Evernote" to the start screen. Every time they update the version, my "Evernote" icon is lost from the start screen. I have to add it manually every time I update, which also makes me very unhappy. I have given them feedback, but their problem has always existed. I really can't stand it, so I searched for various note-taking software on the Internet, and finally found Notion
It meets my needs very well. You can create directory levels at will, article management is very convenient, and the article layout method can be adjusted very flexibly. This software is very suitable for me, so I migrated all the notes in Evernote to Notion.

Phase 2: Break away from the notion island and share knowledge

As time goes by, I have become a heavy user of Notion, which means that every note or article I write is written in Notion first. I have written a lot of notes, and I hope to share my knowledge. Then I thought of putting the article on my blog, Nuggets, Medium, dev.to and other platforms, but this process is very cumbersome, which directly wipes out your interest in writing articles and sharing knowledge. If you write your article in Chinese, it is okay to put it on your own blog or domestic platform, but if you want to put the article on a foreign platform, this process is very painful. First, you have to translate the article, and then re-upload every picture in it. The most frustrating thing is that Medium does not support copying markdown to the editor of its platform (it uses a very primitive editor, which may be designed by the platform to ensure the beauty and quality of the article). After copying the markdown content to the Medium editor, the article format is all messed up. This process makes me very painful. If you have had such an experience, you can definitely feel the pain in the middle. You may ask: "Since Medium is so difficult to use, why do you still put articles on Medium? The reason is: it is very mainstream and you can earn income by writing articles, unlike various domestic platforms..."

Phase 3: How to distribute articles on notion?

I have written so many notes, how can I share the knowledge I have mastered? So I searched for notion to markdown on the Internet, and immediately found notion-to-md. At this time, I can happily convert many of the article notes I wrote on notion into markdown, and then publish them to the blog platform. After doing it, I found that the article pictures seemed to be temporary picture addresses, and the pictures could not be found after a while. This made me a little confused. If I manually download the articles on notion, I will find that the articles and pictures are together. Then, can I write a tool to format the zip file downloaded from notion into the format of my blog article with one click? So I added some column processing functions, such as automatic decompression of zip, automatic compression of pictures, automatic upload of pictures, automatic replacement of picture addresses with cdn, automatic submission and publication of articles, etc. After this operation, can I make a library to write articles in markdown and distribute them to any platform with one click? You may ask: Why not use notion to write articles and then distribute them to any platform through tools? Of course, this is also possible, but it adds the steps of writing articles in Notion, downloading articles, and subsequent processing. So why not use markdown to write articles directly, and then use tools to automatically process articles and resources. This is more flexible, so there is artipub, an article publishing assistant.

🔍Artipub prototype

ArticleProcessor

Input: markdown draft, image resources
Processing process: parsing markdown, modifying markdown content, uploading images, replacing image addresses, etc. (This process: to facilitate upper-level users to flexibly modify markdown content, so markdown AST is immediately thought of, so that markdown content can be easily modified)
Output: convert the processed ast into markdown and store it in the specified place

PublisherManager

Input: markdown article content
Processing: Some platforms need to remove certain parts of the article or extract certain parts of the article (this process: various platform plug-ins need to be added to facilitate publishing articles to various platforms)
Output: Output the publishing results to the console

Additional note: Before the official opening, you may have all kinds of entanglements and have a fantasy: to make the best and most awesome tool, constantly high, and constantly diverge your thoughts... Special note: If this state continues, you will not be able to do anything, so you must converge your thoughts in time, put your initial ideas into practice, and then continue to iterate, so that you can make a good tool. Today I watched Anthony's open source road: Yak Shaving "薅牛毛", which means that I have a deep understanding of this state, so I wrote this paragraph to warn everyone to converge their thoughts and attention in time and get started. (I used to be such a person)

💪Roll up your sleeves and get to work

Phase 1: Implementing the first basic version

Note: The first version took a total of 10 days, and I wrote more on weekends, and only a little on weekdays.

The second stage: Use it in your own blog project. Otherwise, how can you verify whether the library you made is usable and easy to use?

At first, I sent the package directly to npm, and then used it in the blog project. I found that the package had various problems, which led me to send a lot of broken temporary packages, as shown below:

I was thinking that this was not a solution. The first problem was that my version grew too fast. The second problem was that I released so many broken packages, which was irresponsible to the users of artifactipub and would have a bad impact on the promotion of artifactipub in the future.

Solution to the first problem: I searched a lot on the Internet and found many libraries that updated versions and generated changelogs, but I still couldn't choose which library to use. I accidentally opened GitHub on the subway to look at the exploration page and saw the version release. At this time, I thought about which library released the changelog that looked good, and finally found changelogen was simple and easy to use, so I chose this library.

The solution to the second problem is to add a playground to the artifactipub project to avoid the need to publish packages frequently. In this way, various functions of artifactipub can be tested in the playground, and then the functions of artifactipub can be integrated into the blog project to avoid publishing many bad packages.

Phase 3: Integrate Artipub into the blog project

When integrating artifactipub into the blog project, I immediately discovered a problem. The blog code is still written in the commonjs specification. Although artifactipub supports both commonjs and esm specifications, the reference library still reports that the esm module cannot be introduced. I forgot the specific error. I was thinking that esm is already the trend of the future, so I might as well change the blog project to the esm specification to avoid messy errors. However, after I changed to the esm specification, I still found that there were still various problems using artifactipub. This tells me: no matter your library, there is no problem with local testing, and there is no problem with adding playground testing. If you don’t apply the library to a real project, you will never know what problems will arise, so you must apply the library to a real project in a timely manner so that you can find problems and then solve them.

📊Current situation

[√] artipub has been integrated into my blog project and verified to be usable normally.
[√] artipub has its own documentation website for easy viewing and use. aritpub portal
[ ] Improve api documentation
[ ] Add test cases
[ ] Support publishing articles to more platforms

If you are interested in this project, please help me click a star🌟. You are also welcome to join us so that we can improve this project together and help more people. 😊

📝Summarize

From an idea to its actual implementation, there are many ups and downs in the middle. Ideas, inspirations, and fantasies will make your mind diverge constantly. Finally, you must converge your thoughts and attention in time, implement your ideas, and then continue to iterate, so that you can make your tool.
Copilot is a very easy-to-use AI assistant. I personally feel that it is much better than other assistants. After all, it has the best model training data github. If you encounter various problems in the process, it can basically help you solve them, but it also has its limitations. For example: if you want to make a function, the idea is not very clear. You can keep communicating with it, so that your ideas can be formed into a draft and then implemented. This process is still very helpful. At first, I tried it for a month with $9.9, and later found that it was very easy to use and the money was worth it, so I immediately switched to an annual subscription. I recommend everyone to try GitHub Copilot

📚参考资料

How to implement a tracking log output location plugin?

FreeCoderX — Tue, 22 Feb 2022 09:07:06 +0000

Summary content

Environment construction
Implementation steps
Summarize

Achieve the effect

Often we console.log to print the log. If the editor does not support it well, then the print log does not know which file and which line is printed, so we need to know which file and which line the log is printed in, and finally achieve the effect As shown below

Environment setup

Initialize project npm init -y
Install dependencies npm install @babel/core @babel/preset-env @babel/types babel-loader webpack webpack-cli -D
Create directories and pack files

configure webpack.config.js

Analyze the AST of the code

Look at console.log(“sum: sdf”); what it looks like when converted to AST. In order to see more clearly, we check all the buttons above to make AST look simpler and clearer

Console output log format

Case 1: console.log(“sum: sdf”);

Case 2: console.log(“sum: sdf”,”123");

Case 3: console.log(“123”,”sum: sdf” + “sdf”);

Adjust the AST syntax tree

According to the AST structure of various output console formats, compare and see how to adjust the AST

According to the above AST analysis, we have the idea of implementing, which is not to find the log method in the console, and then add a parameter at the end of the argument to spell the log output source code file and output function.

Implement the plugin

Summarize

Check the AST structure first, and then compare the AST structure to get AST adjustment ideas
Combining debugging + official documentation to achieve functional details Source code portal: 04-traceLogPos

References

Above: If you find any problems, please leave a message and point it out, and I will correct it in time

Thanks for reading, welcome to follow me for more technical articles

Vue2. X - WebPack 4.x Upgrade to Vue2. X - WebPack 5.x

FreeCoderX — Tue, 15 Feb 2022 01:45:25 +0000

Summary content

Upgrade webpack related plugins
loader configuration adjustment
Remove loader-utils, use webpack5 built-in interface
Summarize

1. Upgrade the plugin

webpack and webpack-cli

yarn add webpack@latest webpack-cli@latest

Upgrade plugins and loader

yarn add html-webpack-plugin@latest mini-css-extract-plugin@latest css-loader@latest less-loader@latest sass-loader@latest svg-sprite-loader@latest

2. Configuration Adjustments

1. Loader configuration adjustment

Since webpack5 has a built-in resource module, you can directly remove the plugin

yarn remove fileloader url-loader

Replace the original location with the new configuration

2. Remove loader-utils and use the built-in interface of webpack5

Remove loader-utils

yarn remove loader-utils

Replace the interface

3. Turn off the built-in pollyfill in @babel/preset-env and use core-js 3.x

Turn off pollyfill

Use core-js

3. Problems encountered

1. Buffer is not defined

2. Style loss problem

Phenomenon:

At this time, there is a sense of powerlessness. I guess it is a loader problem, but the whole project has too much content, so it is very difficult to troubleshoot the problem, so I thought of a solution, which is to re-create a feeling project to test to see which loader it is. Something went wrong. After a arduous round of testing, it was found to be a vue-loader problem. It is enough to update to the 15.x version. The reason: 16.x+ is for vue3 code location

3. Unable to package problem

Effect:

I really have no clue about this error, look at the package.json packaging command

"scripts": { "build": "cross-env node build/build.prod.js ENV_TYPE=1 platform=pc", }

The most suspicious thing is whether the version of cross-env does not match, go to github to see the documentation

Check the local environment node: v14.14.0 , cross-env: ^5.2.0 , go to update the cross-env version, and after the update, npm run build, still report the same error above.

When I saw that the error was related to npm, I had an idea: I directly executed the command, webpack --config build/webpack.prod.conf.js, to see if I could get more error information

Tip: The devtools configuration has been adjusted, check the devtool documentation

Directly set devtool to false, add SourceMapDevToolPlugin, and npm run build again to package successfully~~~

Summarize

Divide complex problems into simple problems to solve them faster (for example: the loader problem and npm packaging problem encountered above are all complex problems into simple problems, and then get more information and solve the final complex problem)

references

Above: If you find any problems, please leave a message and point it out, and I will correct it in time

DEV Community: FreeCoderX

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

背景

实现效果

Web网站

微信小程序

方法1：通过wx.miniProgram.postMessage将pdf数据传给小程序

方法2：通过后端中转数据，然后通过导航传参（最后的备用方案）

总结

参考文献

经过2个多月终于把我的github Sponsor弄好

背景

Github Sponsor 赞助在中国区域不可用

简单总结一下

开通Github Sponsor

开通Github Sponsor需要创建Stripe账号

继续填写信息，发现我分行在Stripe平台找不到

前几天终于审核通过了，收到了这个邮件

配置Github Sponsor

最后

Give the celebrity open source project Nuxt, submit the whole process of the first PR of life🎉

Background

Debugging the problem, find the specific reasons

Solve problem

The first PR (Closed：5-22)

The second PR (Merged: 5-22)

Waiting for cookies to release a new package

Cookie-ES releases a new package (7-19)

The third PR (Merged: 7-25)

Submit PR to NUXT

The first PR (7-22)

Problems along the way

Receive Nuxt post emails

Summarize

More

Good news is here! 🎉🎉🎉use artipub to automatically publish the article to more platforms

❓ Why do you need artipub?

✨ Features

📌 TODO

🔧 Built-in

Treatment middleware

Publish plug -in

🌟Birth background

Phase 1: Abandon Evernote and switch to Notion

Phase 2: Break away from the notion island and share knowledge

Phase 3: How to distribute articles on notion?

🔍Artipub prototype

ArticleProcessor

PublisherManager

💪Roll up your sleeves and get to work

Phase 1: Implementing the first basic version

The second stage: Use it in your own blog project. Otherwise, how can you verify whether the library you made is usable and easy to use?

Phase 3: Integrate Artipub into the blog project

📊Current situation

📝Summarize

📚参考资料

How to implement a tracking log output location plugin?

Summary content

Achieve the effect

Environment setup

Analyze the AST of the code

Console output log format

Adjust the AST syntax tree

Implement the plugin

Summarize

References

Vue2. X - WebPack 4.x Upgrade to Vue2. X - WebPack 5.x

Summary content

1. Upgrade the plugin

2. Configuration Adjustments

1. Loader configuration adjustment

2. Remove loader-utils and use the built-in interface of webpack5

3. Turn off the built-in pollyfill in @babel/preset-env and use core-js 3.x

3. Problems encountered

1. Buffer is not defined

2. Style loss problem

3. Unable to package problem

Summarize

references