如何实现在手机端预览pdf,word文件,项目是用vue写的
如果是前端可以用embed:https://www.runoob.com/tags/t...
将生成的pdf对象流绑定到embed标签上即可 https://gcdn.grapecity.com.cn...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Proposal Generation</title>
<script type="text/javascript" src="arjs/v2.1.2_beta/ar-js-core.js"></script>
<script type="text/javascript" src="arjs/v2.1.2_beta/ar-js-viewer.js"></script>
<script type="text/javascript" src="arjs/v2.1.2_beta/ar-js-pdf.js"></script>
<script type="text/javascript" src="arjs/v2.1.2_beta/ar-js-html.js"></script>
<script type="text/javascript" src="datasource.js"></script>
<script type="text/javascript">
const ARJS = GC.ActiveReports.Core;
const licenseKey =
'191398738376964#B0ulybaVWSjlWYtNzQyUmU59WaJVma8RUb9dmSDZXNjtUM7tkZURkeut6Z8Z5RXVGNKRTStN4cxkHTzkTY5FESrYVaSdzZ4NXOvw6MUh5c4YHdEVHNwYnN5l5Mz3mUlpUcrEWTygHaj54LhJnSmdEdkxmc9lFZMtUbOJ4Q0tkaqZzKX3UcUNleI9UVVNVbW36SUdEUzNDWwRzdThjZ4l7U8NjYqJ7QDFEbThTcUhzSRVjWrF7MJFGTyITeNd7SzQ4UxEEMktCdktCSv2mM8syUPFGcwQDcTpXVY3COzQzRChWMFVTert6awhHbKhmI0IyUiwiIBZkNzQzM9MjI0ICSiwCN8IDOzYjM4EjM0IicfJye35XX3JSSWFURiojIDJCLiIjVgMlS4J7bwVmUlZXa4NWQiojIOJyebpjIkJHUiwiIwITNwgDMgkTMxATMyAjMiojI4J7QiwiI8+Y9sWY9QmZ0Jyp9Aqo9Re09i+K0oKZ9wap9biY9mKY0L+Y9iojIh94QiwiI4YTO6czM8MzN8kzMxkTMiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34zdJh4KHVlMURXSpNDO7dHdk5kTMhkRVpHVwUWSwImWWZFOLRzdxQ7UCV4Vx44T6NFO9ckW5RWewUkZxFWYphlc0hkWNdEc9J5bIVmM54GSZF4dnp6Y7pUZ4gUQXBXQPlmTmVXZ6gHNuhgQ';
ARJS.setLicenseKey(licenseKey);
ARJS.PageReport.LicenseKey = licenseKey;
const fonts = [
{
name: '微软雅黑',
locals: ['Microsoft YaHei', 'SimSun Regular'],
source: 'fonts/Chinese.ttf',
},
{
name: 'Sinhala',
locals: ['Microsoft YaHei', 'SimSun Regular'],
source: 'fonts/Chinese.ttf',
},
{
name: 'Arial',
weight: 'bold',
style: 'italic',
source: 'fonts/arialbi.ttf',
},
{
name: 'Arial',
style: 'italic',
source: 'fonts/ariali.ttf',
},
{
name: 'Arial',
weight: 'bold',
source: 'fonts/arialbd.ttf',
},
{
name: 'Arial',
source: 'fonts/arial.ttf',
},
];
ARJS.FontStore.registerFonts(fonts);
</script>
<script>
const settings = {
info: {
title: 'Invoice List',
subject: 'This is the Invoice List',
author: 'John K',
keywords: 'PDF; import; export',
},
fonts: fonts,
};
const lang = 'HK';
function blob2base64(blob) {
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = () => {
reject(reader.err);
};
reader.readAsDataURL(blob);
});
}
async function generateProposal(mainReport, dsparam) {
window.dsparam = dsparam;
const start = new Date();
console.log(`start generate proposal inner puppeteer HTML ${start}`);
const PDF = GC.ActiveReports.PdfExport;
const pageReport = new ARJS.PageReport();
try {
await pageReport.load(mainReport);
if ('LicenseError' === pageReport.name) {
throw new Error('License Error');
}
const pageDocument = await pageReport.run();
// const result = await PDF.exportDocument(pageDocument, settings, pageNum => {
// console.log(`${new Date() - start}: exporting PDF version at page ${pageNum}`);
// });
// console.log(`${new Date() - start}: pdf document exported completed, cost ${Date.now() - start}ms`);
// document.getElementById("pdf").src = URL.createObjectURL(result.data);
} catch (e) {
console.error(`error occured while generate the proposal, ${e}`);
}
}
</script>
</head>
<body>
<button onclick="generateProposal('templates/main.rdlx-json', datasource)">REFRESH</button>
</body>
<script>
generateProposal('templates/main.rdlx-json', datasource)
</script>
</html>
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
试试