【官方途径】国家标准查询与下载

下面记录一段浏览器控制台运行的代码,将网页元素转变成pdf文档:

// 1. 加载必要的库
function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

async function init() {

   document.getElementById('viewer').style = '';
  // 检查是否已加载html2canvas
  if (typeof html2canvas === 'undefined') {
    await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js');
  }
  
  // 检查是否已加载jsPDF
  if (typeof window.jspdf === 'undefined') {
    await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js');
  }
  
  // 2. 选择要导出的DOM元素 - 使用.page选择器
  const elements = Array.from(document.querySelectorAll('.page'));
  if (elements.length === 0) {
    console.error('没有找到.page类的元素,请检查页面结构');
    return;
  }
  
  // 3. 创建PDF文档
  const { jsPDF } = window.jspdf;
  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm'
  });
  
  // 4. 逐个处理DOM元素
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    
    try {
      // 将DOM元素转换为canvas
      const canvas = await html2canvas(element, {
        scale: 1, // 提高分辨率
        logging: true,
        allowTaint: true,
        scrollX: 0,
        scrollY: 0,
        // 添加更多配置以确保.page元素正确渲染
        windowWidth: element.scrollWidth,
        windowHeight: element.scrollHeight
      });
      
      // 将canvas转换为图像数据
      const imgData = canvas.toDataURL('image/jpeg', 1.0);
      
      // 计算PDF页面尺寸
      const imgWidth = pdf.internal.pageSize.getWidth();
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      
      // 如果不是第一页,添加新页
      if (i > 0) {
        pdf.addPage();
      }
      
      // 添加图像到PDF
      pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
      
      console.log(`已处理第 ${i + 1}/${elements.length} 个.page元素`);
    } catch (error) {
      console.error(`处理第 ${i + 1} 个.page元素时出错:`, error);
    }
  }
  
  // 5. 保存PDF文件
  pdf.save('pages_export.pdf');
  console.log('PDF导出完成,包含', elements.length, '个页面');
}

// 执行初始化
init().catch(console.error);

【官方途径】国家标准查询与下载》有1个想法

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注