[{"insert":"nid 10909714\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"打印demo的使用场景是在ivx集成浏览器的打印方法，并通过参数设置打印初始化配置，效果如下图："},{"insert":"\n"},{"attributes":{"height":"auto","width":"1308","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/q2h0vbHG0iQ8lTeN.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"实现的原理是通过css控制设置的默认值，然后利用浏览器的print函数进行打印。这里需要注意的是可设置的参数仅有打印纸张的大小，布局，边距可以使用。且不能通过js，而是通过css样式去控制。并且大小仅a3/a4/a5三个值可用，填其他值不会起效果。同时需要注意如果通过这种方式规定了大小还有布局的默认值，打印的配置界面里会如上图一样没有办法进行修改和调整。这些都是浏览器的制约因素，了解了这些就可以开始进行开发制作了。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"height":"auto","width":"272","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/HuhZMsqUYdQ4KWWe.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"为了方便控制css，我们需要插入全局的style标签，为了方便控制标签我们引入一个外部库jquery。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"height":"auto","width":"708","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/HiMcycNv3dkNDnJO.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"创建一个fx组件添加两个入参size，margin。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"代码如下："},{"insert":"\n$(\"#printStyle\").remove()"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"$(\"body\").append(`<style id=\"printStyle\">"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"@media print {"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":" @page {"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":" ${size?(\"size: \"+size+\";\"):\"\"}"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"\t\tmargin: ${(margin||0)+\"mm;\"}"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"</style>`)"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"insert":"window.print()"},{"attributes":{"code-block":"plain"},"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"这里需要注意的是@page里size的值是布局和纸张大小的结合，在这个函数里将两个参数合并成一个参数。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"height":"auto","width":"1813","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/eOLJgiEs76PSwGJM.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"如上图：创建供用户交互的组件，包括布局的下拉菜单，大小的下拉菜单，边距的输入框。然后创建一个对象变量，复制写入{\"横向\":\"landscape\",\"纵向\":\"portrait\"}"},{"insert":"\n"},{"attributes":{"height":"auto","width":"1803","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/jN8TsfmnwaGwVhin.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"如上图：这个json对象的键做为布局下拉菜单的选项。"},{"insert":"\n"},{"attributes":{"height":"auto","width":"1787","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/pZqhXK1ylQxGuHyP.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"如上图：选择之后给字符变量赋值为键对应的值"},{"insert":"\n"},{"attributes":{"height":"auto","width":"1765","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/oARoIxIVBZck1uSG.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"边距根据输入框直接赋值就可以。如上图：纸张大小的下拉菜单直接用数组值加空格，原因是size的值是两个变量的结合，css要根据空格判断size是单个值还是复合值。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"height":"auto","width":"1754","color":"#494949","lineHeight":"100%"},"insert":{"image":"https://uploader.shimo.im/f/eNuHGFjKDzwAW9Ci.png!thumbnail?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2NDY2NDc3NzQsImciOiI1cms5ZGVQMTFySGJ4YnF4IiwiaWF0IjoxNjQ2NjQ3NDc0LCJ1c2VySWQiOjI3ODgyMDgzfQ.Mws4ZJMWo6tO99OIfySl2fYTVLHmRASwgleCeDqko7U"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"如上图：当点击打印的时候把布局和大小字符串进行拼接，作为size传入fx组件进行函数调用。如果用户没有选择，那么会输入空字符串，就不会在css里添加size属性。"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"接下来编译就可以，模板地址："},{"attributes":{"color":"#70b1e7","lineHeight":"100%","link":"https://www.ivx.cn/ih5/app/template/download?id=4832"},"insert":"https://www.ivx.cn/ih5/app/template/download?id=4832"},{"insert":"\n\n"}]
[{"insert":"页面调用浏览器打印功能\n"}]