{"id":17933034,"url":"https://github.com/my729/intopdf-demo","last_synced_at":"2026-01-21T01:32:03.376Z","repository":{"id":44988146,"uuid":"119321580","full_name":"MY729/intopdf-demo","owner":"MY729","description":"HTML转PDF，效果演示","archived":false,"fork":false,"pushed_at":"2022-12-07T12:40:23.000Z","size":1109,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-08T08:50:00.664Z","etag":null,"topics":["html2canvas","jspdf","pdf","vue"],"latest_commit_sha":null,"homepage":"https://my729.github.io/intopdf-demo/dist","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MY729.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-29T02:35:11.000Z","updated_at":"2023-08-26T09:17:45.000Z","dependencies_parsed_at":"2023-01-24T17:16:15.952Z","dependency_job_id":null,"html_url":"https://github.com/MY729/intopdf-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MY729/intopdf-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MY729%2Fintopdf-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MY729%2Fintopdf-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MY729%2Fintopdf-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MY729%2Fintopdf-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MY729","download_url":"https://codeload.github.com/MY729/intopdf-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MY729%2Fintopdf-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28621623,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"ssl_error","status_checked_at":"2026-01-20T23:47:29.996Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html2canvas","jspdf","pdf","vue"],"created_at":"2024-10-28T21:36:11.494Z","updated_at":"2026-01-21T01:32:03.356Z","avatar_url":"https://github.com/MY729.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# intopdf\n\n\u003e A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\nFor a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n##  使用到的插件\n# html2canvas\n  \n  功能：将网页截图 （HTML 转成图片）\n\n  原理：脚本遍历它加载的页面的DOM，它收集所有元素的信息，然后用它来构建页面的，Dom节点在Canvas里边画出来\n\n  因此，它只能正确地呈现它理解的属性，这意味着有许多CSS属性不起作用。有关支持的CSS属性的完整列表，请查看 支持的功能页面\n\n \n\n  浏览器兼容性：\n\n  Firefox 3.5+\n  Google Chrome\n  Opera 12+\n  IE9+\n  Edge\n  Safari 6+\n  限制： \n\n  不支持iframe\n  不支持跨域图片\n  不能在浏览器插件中使用\n  部分浏览器上不支持SVG图片\n  不支持Flash\n  如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试 )\n\n  文档： https://html2canvas.hertzen.com/\n\n# jsPDF\n  功能：jsPDF支持在静态网页中直接将html代码转为pdf文件\n\n  限制：\n  1. 打印出来PDF不会保留原有的样式\n  2. 不支持中文字符，虽然可以通过addhtml的方式来变相实现，但转出来的PDF文件中所有内容都是图片，分辨率并不高\n  3. 默认不支持分页；尽管提供了分页的选项，但分页效果真的很差。\n  浏览器兼容：\n\n  浏览器支持HTML5就可以 低版本的IE浏览器不支持\n\n  文档：http://rawgit.com/MrRio/jsPDF/master/docs/global.html#addHTML\n\n# html2canvas和jsPDF 结合  实现 HTML转pdf \n\n安装 html2canvas：n\n\n  npm install --save html2canvas\n\n安装 jsPDF ：\n\n  npm install jspdf --save\n\n使用：\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"hello\"\u003e\n    \u003cbutton @click=\"save\"\u003e点击\u003c/button\u003e    \n    \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n      \u003ch2\u003eEssential Links\u003c/h2\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://vuejs.org\" target=\"_blank\"\u003eCore Docs\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://forum.vuejs.org\" target=\"_blank\"\u003eForum\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://chat.vuejs.org\" target=\"_blank\"\u003eCommunity Chat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://twitter.com/vuejs\" target=\"_blank\"\u003eTwitter\u003c/a\u003e\u003c/li\u003e\n        \u003cbr\u003e\n        \u003cli\u003e\u003ca href=\"http://vuejs-templates.github.io/webpack/\" target=\"_blank\"\u003eDocs for This Template\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n \n\u003cscript\u003e\nimport html2canvas from 'html2canvas'\nimport JsPDF from 'jspdf'\n \nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  },\n  methods: {\n   // 实现HTML转PDF的方法\n   save() {\n        html2canvas(document.body).then(canvas =\u003e {\n          document.body.appendChild(canvas)\n          let pageData = canvas.toDataURL('image/jpeg', 1.0)\n          // 方向默认竖直，尺寸ponits，格式a4[595.28,841.89]\n          let pdf = new JsPDF('', 'pt', 'a4')\n          // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩\n          pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height)\n          pdf.save('stone.pdf')\n        })\n    }\n  }\n}\n\u003c/script\u003e\n \n\u003c!-- Add \"scoped\" attribute to limit CSS to this component only --\u003e\n\u003cstyle scoped\u003e\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmy729%2Fintopdf-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmy729%2Fintopdf-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmy729%2Fintopdf-demo/lists"}