我正在光栅化以下简单的 html+svg+foreignObject html
<html>
<head>
<meta charset="UTF-8">
<!--reset stylesheet -->
<link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />
<style>
p {
border: 1px solid red;
font-size: 15px !important;
}
svg {
outline: 1px solid purple;
}
</style>
</head>
<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">
<svg style="width: 1050px; height: 750px;">
<foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Oh when the sun begins to shine.</p>
</body>
</foreignobject>
</svg>
</body>
</html>使用这个简单的光栅化脚本:
webPage = require 'webpage'
args = (require 'system').args
url = args[1]
destination = args[2]
page = webPage.create()
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
#page.zoomFactor = 1.991
#page.viewportSize = (width: 1050, height: 75)
page.open url, (status) ->
if status isnt 'success'
console.log "Error!", url, status
return phantom.exit()
rasterize = ->
page.render destination
console.log "Rasterized", url, "to", destination
return phantom.exit()
setTimeout rasterize, 100
如您所见，单个可见元素的大小为 1050 像素 x 750 像素。我想将它精确地光栅化到 10.5 英寸 x 7.5 英寸的纸张尺寸上，尺寸为 100%。
我的光栅化脚本执行以下操作:
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'
结果是这样的pdf:
所以这不会扩展到全尺寸。我可以通过调整缩放系数来调整到全尺寸。实验上我发现这有效
page.zoomFactor = 1.991
现在元素可以正确缩放，但字体被放大太多。
如何在保持原始字体大小的同时，将页面的左侧/最顶部 1050px/750px 缩放到纸张上的 10.5inx7.5in？
最佳答案
您是否已经尝试过在 css 上使用媒体查询？
webPage = require 'webpage'
args = (require 'system').args
url = args[1]
destination = args[2]
page = webPage.create()
page.paperSize = width: '10.5in', height: '7.5in', border: '0in'#
page.zoomFactor = 1.991# page.viewportSize = (width: 1050, height: 75)
page.open url, (status) - >
if status isnt 'success'
console.log "Error!", url, status
return phantom.exit()
rasterize = - >
page.render destination
console.log "Rasterized", url, "to", destination
return phantom.exit()
setTimeout rasterize, 100@media print {
body {
margin: 0;
background-image: none;
height: 10.5in;
width: 7.5in;
}
}
p {
border: 1px solid red;
font-size: 8pt !important;
}
svg {
outline: 1px solid purple;
}<link rel="stylesheet" type="text/css" href="https://phantomjs.googlecode.com/git-history/cbdd80e98ea1eb29d5d3a9c65c84798b472b59b1/website/reset.css" />
<body style="height: 1050px; width: 1050px; max-width: 1050px; max-height: 750px;">
<svg style="width: 1050px; height: 750px;">
<foreignobject height="40" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" width="45" x="45" y="45">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Oh when the sun begins to shine.</p>
</body>
</foreignobject>
</svg>
</body>关于pdf - Phantomjs zoomFactor - 将光栅化缩放到特定大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25966175/