多个pdf和图片实现预览和下载

2022-03-04 18:02:35 阅读：144 来源： 互联网
标签：canvas canvasWrapp const 预览 label pdf document 下载
效果

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="google" value="notranslate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @media screen and (min-width: 960px) {
        html,
        body {
          width: 960px;
          margin: auto;
        }
      }

      @media screen and (max-width: 960px) {
       .canvasWrapp{
           overflow-x: scroll;
       }
      }

      @media print {
        .btn {
          display: none;
        }
        .label {
          display: none;
        }
        canvas {
          box-shadow: unset !important;
        }
      }

      img {
        width: 100%;
      }
      .label {
        font-size: 20px;
        font-weight: 700;
        color: white;
        margin-top: 20px;
        background-color: green;
        padding: 10px;
      }
      
      .canvasWrapp {
        box-shadow: 0px 0px 6px #000;
      }
      
      .down {
        border: green dashed 1px;
        padding: 4px;
        margin-top: 10px;
      }
      .down a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="btn">
      <button>打印此页面</button>
    </div>
    <div class="down"></div>
  </body>
  <script src="./lib/pdf.js"></script>
  <script src="./lib/pdf.worker.js"></script>
  <script>
    const files = [
      "http://cos.dshvv.com/aegis/pdf1.pdf",
      "http://cos.dshvv.com/aegis/img1.png",
      "http://cos.dshvv.com/aegis/pdf2.pdf",
      "http://cos.dshvv.com/aegis/img2.png",
    ];

    /*
     * 渲染pdf
     */
    const renderPdf = async (pdfUrl) => {
      const loadingTask = pdfjsLib.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      for (let index = 1; index < pdf.numPages + 1; index++) {
        const page = await pdf.getPage(index);

        // const desiredWidth = document.body.clientWidth
        const desiredWidth = 960;
        const viewportTemp = page.getViewport({ scale: 1 });
        const scale = desiredWidth / viewportTemp.width;
        console.log(scale);

        const viewport = page.getViewport({ scale });
        const canvas = document.createElement("canvas");
        const canvasContext = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({ canvasContext, viewport });

        const canvasWrapp = document.createElement('div');
        canvasWrapp.className = 'canvasWrapp';
        canvasWrapp.append(canvas);
        document.body.append(canvasWrapp);
      }
    };

    /*
     * 入口方法
     */
    async function main() {
      let downHtml = "";
      const fileNameReg = /(.*\/)*([^.]+).*/gi;
      for (const renderItem of files) {
        const extension = renderItem.substring(renderItem.lastIndexOf(".") + 1);
        const fileName =
          renderItem.replace(fileNameReg, "$2") + "." + extension;
        downHtml += `<div><a href='${renderItem}' down='${fileName}' target='_blank'>点击下载：${fileName} ⬇️</a></div>`;

        // 渲染pdf或图片
        const label = document.createElement("div");
        label.className = "label";
        label.innerText = fileName + " 
 
标签：canvas,canvasWrapp,const,预览,label,pdf,document,下载	

来源： https://www.cnblogs.com/dshvv/p/15965439.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
ICode9

多个pdf和图片实现预览和下载

效果

代码
