如何实现在手机端预览pdf,word文件

Z时代
2024-02-09
分类：IT

如何实现在手机端预览pdf,word文件，项目是用vue写的

回答：

试试

<iframe src="unix test.pdf" width=900 height=900>
This browser does not support PDFs. Please download the PDF to view it: <a href="unix test.pdf">Download PDF</a></iframe>

回答：

pdf可以直接href打开
word文档用微软的url直接调用，https://view.officeapps.live....文档地址

回答：

如果是前端可以用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>