立即登录 现在不管是做产品宣发、办线下展会，还是餐厅更新菜单，“扫码看资料”已经成了标配。比起直接甩给客户一个几百兆的PDF，或者让他们去网盘里苦苦等待下载，把文档转成二维码、扫开就能在手机或电脑上直接预览，体验显然要好得多。如果你稍微懂点前端基础，完全没必要去用那些限制重重、还经常弹广告的第三方生成工具。自己用HTML和JavaScript写一个，不仅轻量，还能把主动权牢牢握在自己手里。
动手前得先理清一个概念：二维码本身装不下庞大的PDF文件，它本质上只是一个网址链接。因此，我们的第一步是先做一个能在线预览PDF的网页。
新建一个HTML文件，用 <iframe> 或 <embed> 标签把PDF嵌进去就行，比如写一句 <iframe src="example.pdf" width="100%" height="600px"></iframe>。这里有个容易踩坑的细节：PDF文件必须和HTML放在同一个目录下，或者确保你写的路径绝对正确。不然，别人扫出来的大概率是个白屏或者404报错。
网页搭好并确认能正常显示后，接下来就是把这个网页链接变成二维码。自己手写矩阵算法显然不现实，直接引入成熟的开源库是最聪明的做法。在HTML的 <head> 标签里引入经典的 QRCode.js。这个库体积小巧，不依赖复杂的框架，对付这种轻量级需求再合适不过。同时，在页面里找个合适的位置（比如预览区下方），放一个空的 <div> 标签并设好ID（例如 <div id="qrcode"></div>），这就是等会儿用来渲染二维码的“画板”。
核心的生成逻辑其实就几行JavaScript代码，在页面底部引入脚本并实例化QRCode对象即可。不过，这里要特别纠正一个很多新手教程里常犯的错误：有些教程会教你把 text 属性直接设为 "example.pdf"。这在本地测试时可能没感觉，但实际扫码时绝对会翻车。因为扫码设备识别到的是一个相对路径，它根本不知道去哪个域名下找这个文件。最稳妥的做法是传入当前网页的完整URL，比如直接用 window.location.href，或者手动拼接好完整的绝对域名路径。这样不管谁在什么环境下扫码，都能准确跳转到你的预览页。
代码写完，先别急着直接双击HTML文件在浏览器里看效果。因为浏览器的安全策略，直接用 file:// 协议打开本地文件，经常会导致PDF加载失败或JS跨域报错。建议用VS Code的Live Server插件，或者用Python起个简单的本地服务器来预览。
确认扫码能正常跳转并显示PDF后，把整个文件夹（包括HTML、JS库和PDF文件）打包传到你的服务器或云存储上，拿到真实的公网链接，这事儿就算圆满完成了。
自己写代码实现这个小功能，最大的好处就是灵活。后期你完全可以在页面上加个输入框，让用户自己上传PDF并实时生成二维码；或者在URL里带上渠道参数，顺便统计一下不同线下物料的扫码转化率。技术实现本身并不难，关键在于怎么把它和实际的业务场景结合得更顺畅。