You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

82 lines
2.1KB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>二维码生成</title>
  6. <script type="text/javascript" src="./otherslib/lib/qrcode.min.js"></script>
  7. <script type="text/javascript" src="./otherslib/lib/jquery.min.js"></script>
  8. <style>
  9. .box {
  10. width: 110px;
  11. height: 110px;
  12. border: 1px solid #999;
  13. }
  14. #qrcode {
  15. width: 100px;
  16. height: 100px;
  17. margin: 5px auto;
  18. }
  19. #tip{
  20. font-size: 13px;
  21. color: red;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box">
  27. <div id="qrcode">
  28. </div>
  29. <img src="" id="imgData"></img>
  30. </div>2+66
  31. <input type="text" id="text" value="二维码文字"> &nbsp;<span id="tip"></span> <br>
  32. <input type="button" id="btnMakeQRCode" value="生成二维码">
  33. <input type="button" id="btnInsert" value="插入文档中">
  34. </body>
  35. <script>
  36. var qrcode = new QRCode(document.getElementById("qrcode"), {
  37. width : 100,//设置宽高
  38. height : 100
  39. });
  40. document.getElementById('btnMakeQRCode').onclick = function () {
  41. makeCode();
  42. }
  43. document.getElementById('btnInsert').onclick = function() {
  44. let l_canvasImg = $("#qrcode").find("canvas")[0];
  45. let l_DataURL = l_canvasImg.toDataURL("image/png");
  46. //wps.WpsApplication().Selection.Goto();
  47. let l_shapeQR=wps.WpsApplication().ActiveDocument.Shapes.AddBase64Picture(l_DataURL);
  48. //l_shapeQR.Left =
  49. l_shapeQR.Visible = true;
  50. l_shapeQR.Select();
  51. }
  52. $("#text").on("blur", function () {
  53. makeCode();
  54. }).on("keydown", function (e) {
  55. if (e.keyCode == 13) {
  56. makeCode();
  57. }
  58. });
  59. /**
  60. */
  61. function makeCode () {
  62. let elText = document.getElementById("text");
  63. if (!elText.value) {
  64. $("#tip").text("请输入二维码文字");
  65. elText.focus();
  66. return;
  67. }
  68. $("#tip").text("");
  69. qrcode.makeCode(elText.value);
  70. }
  71. </script>
  72. </html>